All components
Menu
Dropdown command lists with items, group labels, keyboard shortcut hints, and separators.
Variants
subtle
solid
Sizes
sm
md
Install
zsh — menu
1bunx stylexblocks add menuUsage — Base UI
menu.tsx
123456789101112131415161718192021222324252627282930import { Menu } from "#components/ui/base-ui/menu.tsx";import { Button } from "#components/ui/base-ui/button.tsx";
export function Example() { return ( // size/variant resolve once on Root; parts inherit them via context. // Portal → Positioner → Popup is Base UI's real overlay chain; keyboard // highlight styles key off the engine's data-highlighted attribute. <Menu.Root size="md"> <Menu.Trigger render={<Button variant="surface" />}>Options</Menu.Trigger> <Menu.Portal> <Menu.Positioner sideOffset={8}> <Menu.Popup> <Menu.Group> <Menu.GroupLabel>Actions</Menu.GroupLabel> <Menu.Item> <Menu.ItemText>New file</Menu.ItemText> <Menu.ItemCommand>⌘N</Menu.ItemCommand> </Menu.Item> </Menu.Group> <Menu.Separator /> <Menu.Item> <Menu.ItemText>Delete</Menu.ItemText> </Menu.Item> </Menu.Popup> </Menu.Positioner> </Menu.Portal> </Menu.Root> );}