A menu is the list surface that opens from a button or action (Dropdown menu) or from a Select field (Exposed dropdown menu). The two differ only in the element that opens the surface, so they share one component.
Tokens, sizes, measurements, states and requirements. Values come from the live token package and from Figma: Base Item and Menu Item Divider.
Resolved from the live token package.
| State | Part | Token | Value |
|---|
| Breakpoint · size | Row height | Max height (14 rows) | Check icon | Text |
|---|---|---|---|---|
| Desktop · Large | 48px | 672px | 24px | body-md 17/24, 0.32px |
| Desktop · Small | 40px | 560px | 20px | body-sm 14/20, 0.36px |
| Mobile · Large | 40px | 560px | 20px | body-md 16/22, 0.32px |
| Mobile · Small | 32px | 448px | 20px | body-sm 14/20, 0.36px |
sm (640 to 768px) looks like mobile. The scrollbar is 12px wide.
Padding of one row at each size. The shaded areas are the 16px padding to the left and right; the row height comes from the size, not from padding. The numbers are read from the component.
| Attribute | Large | Small |
|---|---|---|
| Row height, Desktop | 48px | 40px |
| Row height, Mobile | 40px | 32px |
| Padding left and right | 16px | |
| Padding top and bottom | 0 (the row has a minimum height) | |
| Gap, label to icon | 8px | |
| Divider | 1px, inside the row height | |
| Divider inset, middle-inset | 16px on each side | |
| Focus ring | 2px, inside the row | |
The same padding and distances as spacing tokens.
| Part | Value |
|---|---|
| Row padding, left and right | space-16 |
| Gap, label to icon | space-8 |
| Divider inset | space-16 |
| Part | Token |
|---|---|
| Menu surface | elevation-b-80 |
The shadow is listed with the other tokens under Design Tokens.
Enabled, hover, focus, selected and disabled for both selection types. Hover and focus are forced on this page; in your code they come from :hover and keyboard focus (:focus-visible).
| State | Select | Multi Select |
|---|
Figma defines Enabled, Hover, Selected and Disabled · selected (Select, all sizes), and Multi Select for Large on desktop only. Derived here, not in Figma: the Focus ring (2px border-focus inside the row, as in the other form components), the plain Disabled row, Disabled in Multi Select, and Multi Select for Small and mobile (same 20px icon as the Select variant on those sizes).
| Part | Type | Size / line height | Letter spacing | Weight |
|---|---|---|---|---|
| Label, Large | body-md | 16/22 mobile, 17/24 from 769px | 0.32px | Regular |
| Label, Small | body-sm | 14/20 | 0.36px | Regular |
Breuer Condensed with ss02, ss03 and ss06.
| Element | Class | Notes |
|---|---|---|
| Menu | menu, menu--sm, --multi, --full, --none | The white surface with the shadow. |
| List | menu__items | A ul with role="listbox". Scrolls after 14 rows. |
| Row | menu__item | An li with role="option" and aria-selected. |
| Label | menu__item-label | Fills the row. |
| Check icon | menu__item-icon | Draws circle or check_circle with a pseudo-element. Empty in the markup. |
| Type | Class | Use |
|---|---|---|
| Select | menu | One choice, marked with a check. |
| Multi Select | menu menu--multi | Several choices: a circle on every row, a check on the chosen ones. |
| Small | menu--sm | Compact surfaces. |
| Full-width divider | menu--full | The line runs edge to edge. |
| No divider | menu--none | No line between rows. |
The menu is width: 100% of the container the opener gives it.
| Input | Result |
|---|---|
| Hover | Row fill changes. In Multi Select an unselected row previews the check. |
| Click, Enter, Space | Chooses the row. Select replaces the choice; Multi Select toggles it. |
| Tab | Rows are focusable. A 2px ring shows inside the row on keyboard focus. |
| Arrow keys | Up and Down move between rows and skip a disabled row. |
| Disabled row | aria-disabled="true": text-disabled text and icon, no hover fill, not focusable, click and Enter ignored. |
| Escape | The opener closes the menu and returns focus to itself. |
| Scrolling | After 14 rows the list scrolls. |
Open and close behavior belongs to the opener (button or Select field). This page shows the surface only.
| Topic | Requirement |
|---|---|
| Roles | role="listbox" on the list, role="option" and aria-selected on each row, aria-multiselectable="true" for Multi Select. Name the list with aria-label. |
| Focus | Rows are focusable. A 2px ring on keyboard focus (border-focus) (WCAG 2.4.7, 1.4.11). |
| Keyboard | Arrow keys, Enter and Space work. Escape closes through the opener. |
| State | The check icon is not the only signal: aria-selected carries the state for assistive technology (WCAG 1.4.1). |
| Disabled | A disabled row is aria-disabled and not focusable. Disabled tokens are exempt from contrast requirements. |