Menu
A dropdown menu built on the Base UI `Menu` compound component. Supports items, sub-menus, checkbox items, radio groups, groups, separators, and keyboard shortcuts.
A dropdown menu built on the Base UI Menu compound component. Supports items, sub-menus, checkbox items, radio groups, groups, separators, and keyboard shortcuts.
tsx
import { Button } from "@celestia-project/ui/primitive/button"import { Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubTrigger, MenuTrigger,} from "@celestia-project/ui/composite/menu"
<Menu> <MenuTrigger render={<Button variant="outline" />}>Open Menu</MenuTrigger> <MenuPortal> <MenuPositioner sideOffset={8} align="start"> <MenuPopup> <MenuGroup> <MenuGroupLabel>Actions</MenuGroupLabel> <MenuItem> New Tab <MenuShortcut>⌘T</MenuShortcut> </MenuItem> <MenuSub> <MenuSubTrigger>Share</MenuSubTrigger> <MenuPortal> <MenuPositioner sideOffset={4}> <MenuPopup> <MenuItem>Copy Link</MenuItem> </MenuPopup> </MenuPositioner> </MenuPortal> </MenuSub> </MenuGroup> <MenuSeparator /> <MenuCheckboxItem checked={checked} onCheckedChange={setChecked}> Status Bar </MenuCheckboxItem> <MenuRadioGroup value={panel} onValueChange={setPanel}> <MenuRadioItem value="top">Panel Top</MenuRadioItem> </MenuRadioGroup> <MenuSeparator /> <MenuItem variant="destructive">Delete</MenuItem> </MenuPopup> </MenuPositioner> </MenuPortal></Menu>| Component | Purpose |
|---|---|
Menu | Root — manages open/close state |
MenuTrigger | Toggle button (use render to customize the element) |
MenuPortal | Renders the popup into a portal |
MenuPositioner | Positions the popup (sideOffset, align, side) |
MenuPopup | The visible menu container |
MenuItem | An action item (variant="destructive", inset) |
MenuCheckboxItem | Toggleable item (checked, onCheckedChange) |
MenuRadioGroup / MenuRadioItem | Single-select group (value, onValueChange) |
MenuSub / MenuSubTrigger | Nested sub-menu |
MenuGroup / MenuGroupLabel | Grouping with a label |
MenuSeparator | Visual divider |
MenuShortcut | Keyboard hint aligned to the right |