Menu
Menu shows a list of commands or options when people interact with a button.
Supports icons, shortcuts (secondaryContent), groups with headings, dividers, radio items, checkbox items and submenus. Navigate with the arrow keys, Enter and Esc.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Menu, MenuTrigger, MenuPopover, MenuItem, MenuDivider, MenuGroupHeader, MenuRadioGroup, MenuItemRadio, MenuItemCheckbox, MenuSub, MenuSubTrigger, MenuSubPopover,} from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Radio & checkbox
Mutually exclusive choices (radio) and on/off options (checkbox) inside the menu.
Submenu
Groups secondary commands; nest at most 1 level.
Usage
Do
- Labels are short verbs in sentence case.
- Group related commands with MenuDivider / MenuGroupHeader.
- Put destructive commands last, after a divider.
Don't
- Don't put more than ~10 items in one menu.
- Don't nest submenus more than 1 level deep.
- Don't put complex interactive content (forms) in a menu. Use Popover.
Props
| Prop · Type | Default | Description |
|---|---|---|
| Menu | Default: true | true: while the menu is open, page scrolling is locked, an outside click only closes the menu and the rest of the page is hidden from screen readers. false: the page keeps scrolling and outside clicks reach it right away. See Scroll lock. |
| MenuItem | Default: — | Icon, size 20. |
| MenuItem | Default: — | Shortcut or secondary information at the end of the item. MenuItemCheckbox and MenuItemRadio have it too. |
| MenuPopover | Default: "start" | Alignment with the trigger. |
| MenuPopover | Default: — | Yugen Labs — a glass menu, usually opened from a glass bar, that grows out of the button that opens it. MenuSubPopover has it too. |
| MenuRadioGroup | Default: — | Selected radio item. |
| MenuItemCheckbox | Default: — | On/off state. |