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 — Ark UI
menu.tsx
123456789101112131415161718192021222324252627282930import { Menu } from "#components/ui/ark-ui/menu.tsx";import { Button } from "#components/ui/ark-ui/button.tsx";
export function Example() { return ( // size/variant resolve once on Root; parts inherit them via context. // The positioner portals to <body>; keyboard highlight styles key off // the machine's data-highlighted attribute. <Menu.Root size="md"> <Menu.Trigger asChild> <Button variant="surface">Options</Button> </Menu.Trigger> <Menu.Positioner> <Menu.Content> <Menu.ItemGroup> <Menu.ItemGroupLabel>Actions</Menu.ItemGroupLabel> <Menu.Item value="new-file"> <Menu.ItemText>New file</Menu.ItemText> <Menu.ItemCommand>⌘N</Menu.ItemCommand> </Menu.Item> </Menu.ItemGroup> <Menu.Separator /> <Menu.Item value="delete"> <Menu.ItemText>Delete</Menu.ItemText> </Menu.Item> </Menu.Content> </Menu.Positioner> </Menu.Root> );}