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.
How to add a menu to a page. The file is components/css/menu.css.
Link the shared stylesheet once per page. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/menu.css">. Both templates already have it. |
| 2. Markup | A div.menu with a ul.menu__items[role="listbox"] of li.menu__item[role="option"] rows. |
| 3. Row | Each row has a span.menu__item-label and an empty span.menu__item-icon. Set aria-selected. |
| 4. Variants | Add menu--sm, menu--multi, menu--full or menu--none. |
| 5. Behavior | Choosing, keyboard and closing belong to the opener. A Select field uses components/js/select-menu.js. |
| Class | Use |
|---|---|
menu | The surface. Large, Select, middle-inset divider. |
menu--sm | Small rows. |
menu--multi | Multi Select: a circle on every row. |
menu--full | Full-width divider. |
menu--none | No divider. |
menu__items | The list. Scrolls after 14 rows. |
menu__item | One row. |
menu__item-icon span empty..list-item inside a row when it needs a leading element or trailing text.[data-state] selectors do nothing outside the documentation pages.The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.