Menu
menuPresents action items, groups, separators, and a danger treatment in a dropdown.
Usage
Basic usage
Trigger uses render to take over any trigger element, Content contains MenuItem, and Separator separates it.
<Menu>
<MenuTrigger render={<Button variant="outline">Menu</Button>} />
<MenuContent>
<MenuItem>Edit</MenuItem>
<MenuItem>Copy</MenuItem>
<MenuSeparator />
<MenuItem variant="danger">Delete</MenuItem>
</MenuContent>
</Menu>Disabled item
MenuItem cannot be highlighted or clicked after adding disabled.
<Menu>
<MenuTrigger render={<Button variant="outline">Menu</Button>} />
<MenuContent>
<MenuItem>Edit</MenuItem>
<MenuItem disabled>Archive (Disabled)</MenuItem>
</MenuContent>
</Menu>Grouping
MenuGroup + MenuGroupLabel Add subtitles to a group of menu items.
<Menu>
<MenuTrigger render={<Button variant="outline">Menu</Button>} />
<MenuContent>
<MenuGroup>
<MenuGroupLabel>Operation</MenuGroupLabel>
<MenuItem>Edit</MenuItem>
<MenuItem>Copy</MenuItem>
</MenuGroup>
<MenuSeparator />
<MenuItem variant="danger">Delete</MenuItem>
</MenuContent>
</Menu>Pop-up direction
side / align of MenuContent controls the orientation of the floating layer relative to the trigger.
<Menu>
<MenuTrigger render={<Button variant="outline">Menu</Button>} />
<MenuContent side="right" align="start">
<MenuItem>Edit</MenuItem>
<MenuItem>Copy</MenuItem>
</MenuContent>
</Menu>When to use
Use Menu for a click-triggered set of actions such as Edit, Copy, or Delete. It suits table-row actions, card overflow buttons, and account menus. Use NavigationMenu for hover-triggered site navigation with mega panels, or Menubar for several top-level File/Edit/View menus in one row.
Import
import { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator, MenuGroup, MenuGroupLabel, menuItemVariants } from "@hulianui/ui"Props
MenuContent
| Name | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side of the trigger on which to place the popup. |
| align | "start" | "center" | "end" | "start" | Alignment along the trigger. |
| sideOffset | number | 6 | Distance from the trigger in pixels. |
| className | string | — | Additional class name. |
MenuItem
| Name | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | false | Whether the item is unavailable. |
| closeOnClick | boolean | true | Whether selecting the item closes the menu. |
| label | string | — | Text override used by keyboard type-ahead. |
| variant | "default" | "danger" | "default" | Visual treatment; use danger for destructive actions. |
| className | string | — | Additional class name. |
Use render={<Button />} on MenuTrigger to turn an arbitrary element into the trigger.
Events
MenuItem
| Event | Type | Description |
|---|---|---|
| onClick | MouseEventHandler<HTMLElement> | Called when the item is clicked. |
Slots
MenuContent
| Slot | Type | Description |
|---|---|---|
| children* | ReactNode | Menu entries. |
MenuItem
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Item content. |
Example
<Menu>
<MenuTrigger render={<Button>Menu</Button>} />
<MenuContent side="bottom" align="start">
<MenuItem>Edit</MenuItem>
<MenuItem disabled>Archive (unavailable)</MenuItem>
<MenuSeparator />
<MenuItem variant="danger">Delete</MenuItem>
</MenuContent>
</Menu>With a group (MenuGroupLabel must be nested in MenuGroup):
<MenuContent>
<MenuGroup>
<MenuGroupLabel>Actions</MenuGroupLabel>
<MenuItem>Edit</MenuItem>
<MenuItem>Copy</MenuItem>
</MenuGroup>
</MenuContent>Usage guidelines
- [[base-ui-menu-group-label-requires-menu-group-wrapper]]: placing
MenuGroupLabeldirectly inMenuContentthrowsMenuGroupRootContext is missingas soon as the menu opens. Always wrap a group label inMenuGroup.
Related
Navbar · BeianFooter · NavMenu · NavigationMenu · Menubar · Dock
Playground
<Menu>
<MenuTrigger render={<Button>Menu</Button>} />
<MenuContent side="bottom" align="start">
<MenuItem>Edit</MenuItem>
<MenuSeparator />
<MenuItem variant="danger">Delete</MenuItem>
</MenuContent>
</Menu>