Menu
A menu executes commands — navigate, sign out, toggle a setting — rather than storing a selected value. Use one when choosing an item takes effect immediately and nothing is written to a form.
Its trigger is not a select box: typically an avatar, an icon button, or a kebab (⋯).
Figma embed missing — the page this was adopted from shows a Figma frame here, of an avatar trigger with the account menu open. To be rebuilt by hand.
Choosing between a select, a combobox and a menu
All three open the same panel, so the shape does not tell the reader which one they are using. Choose by what happens when an item is activated.
| Activating an item | Trigger | Where the result goes | |
|---|---|---|---|
| Select | Stores a value, one or several | A select box | A form field, a filter, a view setting |
| Combobox | Stores a value, from a panel with a search field | A select box | The same, when the list needs searching |
| Menu | Runs a command immediately | An avatar, icon button or kebab | Nowhere; nothing is stored |
- Keep stored values and commands in separate panels. A panel that does both leaves the reader unable to predict the result of a choice.
- Treat a menu item that opens a form as a command. The command opens the form, and the form stores the value.
- For the full control table, covering radio, checkbox and toggle, see forms.
Why a menu is a pattern
The code has no Menu construct, and a file in ../components/ has to join a generated page by the code's own name.
What the code has is Dropdown, the panel and its placement, shared with select and combobox. A menu is that panel plus a composed set of commands, which makes it a decision about how several components behave together.
Corrected 2026-10-07. This page previously said the code had no construct for any of this.
ui/Dropdownhas its own stylesheet, its own story and 62 product uses, and the claim left the most-used panel in the library undocumented. The panel now has its own page, and this page covers the choice between the three things that open in it.
Anatomy
A menu is a dropdown carrying commands, so the panel, items, group headers and dividers are documented there. Two parts belong to the menu:
| Part | Description |
|---|---|
| Trigger | Text, button, avatar, or contextual element. Never a select box |
| Menu item | A command, with an optional leading icon to reinforce meaning |
Composition
The account menu is the worked example. It holds four kinds of row in one panel, separated by dividers:
| Section | Holds |
|---|---|
| Identity | Who the reader is signed in as. Not selectable |
| Setting | A label and a control, such as a button group for Light / Dark / System. Takes effect immediately, with no submit |
| Navigation | Account setting, Organization setting |
| Terminal | Sign out, alone below a divider |
- Put the destructive or session-ending item last, behind a divider. It is the one item nobody should reach by accident.
- Only use controls that apply immediately. A menu can hold a toggle or a button group, but not a text field with a save button.