Menu
A list of commands in a popup, triggered by a button. Built on Base UI Menu, which owns the portal, keyboard navigation, typeahead, focus management and the menu/menuitem ARIA wiring. Exposed as composable parts, with nested submenus, checkbox and radio items.
<Menu> <MenuTrigger render={<Button variant="secondary">Actions</Button>} /> <MenuContent> <MenuItem>Edit</MenuItem> <MenuItem>Duplicate</MenuItem> <MenuItem>Share</MenuItem> <MenuSeparator /> <MenuItem variant="danger">Delete</MenuItem> </MenuContent></Menu>Submenus
Nest a MenuSubmenu inside the content. Its trigger reads as a normal row with a trailing chevron and opens the child menu to the side on hover or keyboard. Submenus can nest to any depth.
<Menu> <MenuTrigger render={<Button variant="secondary">Actions</Button>} /> <MenuContent> <MenuItem>New file</MenuItem> <MenuSubmenu> <MenuSubmenuTrigger>Move to</MenuSubmenuTrigger> <MenuSubmenuContent> <MenuItem>Project Atlas</MenuItem> <MenuItem>Project Beacon</MenuItem> <MenuSubmenu> <MenuSubmenuTrigger>Archive</MenuSubmenuTrigger> <MenuSubmenuContent> <MenuItem>2024</MenuItem> <MenuItem>2025</MenuItem> </MenuSubmenuContent> </MenuSubmenu> </MenuSubmenuContent> </MenuSubmenu> <MenuSeparator /> <MenuItem variant="danger">Delete</MenuItem> </MenuContent></Menu>Checkbox & radio items
Toggle settings with MenuCheckboxItem, or pick one option from a set with a MenuRadioGroup. Both keep the menu open on selection.
<Menu> <MenuTrigger render={<Button variant="secondary">View</Button>} /> <MenuContent> <MenuGroup> <MenuGroupLabel>Columns</MenuGroupLabel> <MenuCheckboxItem defaultChecked>Name</MenuCheckboxItem> <MenuCheckboxItem defaultChecked>Status</MenuCheckboxItem> <MenuCheckboxItem>Owner</MenuCheckboxItem> </MenuGroup> <MenuSeparator /> <MenuGroup> <MenuGroupLabel>Sort by</MenuGroupLabel> <MenuRadioGroup defaultValue="recent"> <MenuRadioItem value="recent">Most recent</MenuRadioItem> <MenuRadioItem value="name">Name</MenuRadioItem> <MenuRadioItem value="size">Size</MenuRadioItem> </MenuRadioGroup> </MenuGroup> </MenuContent></Menu>Parts
| Prop | Type | Default | Notes |
|---|---|---|---|
Menu | Root | — | Holds open/defaultOpen, onOpenChange, modal and orientation. |
MenuTrigger | button | — | Opens the menu; pass render to use a Flab Button. |
MenuContent | popup | — | Portals and positions the command list. |
MenuItem | command | — | A command row; variant="danger" tints it red. |
MenuSubmenu / MenuSubmenuTrigger / MenuSubmenuContent | submenu | — | A nested menu, opened from a row with a trailing chevron. |
MenuCheckboxItem | toggle | — | A row that toggles a setting; shows a check when ticked. |
MenuRadioGroup / MenuRadioItem | choice | — | A single choice from a set, marked with a dot. |
MenuGroup / MenuGroupLabel / MenuSeparator | grouping | — | Optional sectioning within the list. |
MenuLinkItem | link | — | A command that navigates; renders an anchor. |