Menu
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
A list of actions in a dropdown, enhanced with keyboard navigation.
Overview
Use Menu for a compact list of actions or choices opened from a trigger.
Menus are useful for overflow actions, account menus, row actions, editor commands, and grouped command lists. Do not use a menu for primary navigation when links should stay visible.
Anatomy
A menu has a trigger, popup, items, optional groups, labels, separators, checkbox items, radio items, links, and nested submenus.
Behavior
Keep menu labels short and action-oriented. Use nested menus sparingly because they require more pointer and keyboard precision.
Accessibility
Menu items should be reachable with keyboard navigation. Use checkbox and radio menu items only when the checked state matters inside the menu.
Installation
npx honestui@latest add menuUsage
import {
Menu,
MenuCheckboxItem,
MenuGroup,
MenuGroupLabel,
MenuItem,
MenuPopup,
MenuRadioGroup,
MenuRadioItem,
MenuSeparator,
MenuSub,
MenuSubPopup,
MenuSubTrigger,
MenuTrigger,
} from "@/components/ui/menu"<Menu>
<MenuTrigger>Open</MenuTrigger>
<MenuPopup align="start" sideOffset={4}>
<MenuItem>Profile</MenuItem>
<MenuSeparator />
<MenuGroup>
<MenuGroupLabel>Playback</MenuGroupLabel>
<MenuItem>Play</MenuItem>
<MenuItem>Pause</MenuItem>
</MenuGroup>
<MenuSeparator />
<MenuCheckboxItem>Shuffle</MenuCheckboxItem>
<MenuCheckboxItem>Repeat</MenuCheckboxItem>
<MenuSeparator />
<MenuGroup>
<MenuGroupLabel>Sort by</MenuGroupLabel>
<MenuRadioGroup>
<MenuRadioItem>Artist</MenuRadioItem>
<MenuRadioItem>Album</MenuRadioItem>
<MenuRadioItem>Title</MenuRadioItem>
</MenuRadioGroup>
</MenuGroup>
<MenuSeparator />
<MenuSub>
<MenuSubTrigger>Add to playlist</MenuSubTrigger>
<MenuSubPopup>
<MenuItem>Jazz</MenuItem>
<MenuItem>Rock</MenuItem>
</MenuSubPopup>
</MenuSub>
</MenuPopup>
</Menu>Examples
Our examples cover hover opening, checkbox items, radio groups, links, group labels, nesting, close behavior, and opening a dialog.