Components
Menu
A button that opens a menu, with your own trigger, a header, icons, groups and destructive items.
Import
import { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator, MenuHeader } from '@rinzai/zen';Examples
Actions
The usual "⋯" menu of actions for one thing: an icon button as the trigger, and a destructive item last.
API reference
<Menu>
A list of actions that opens from a button: a native popover, so outside clicks and Escape close it and focus returns to the button. Arrow keys, Home and End move between items. Put a MenuTrigger (its content is yours: an icon, an avatar, a label) and a MenuContent inside; fill the content with MenuItem, MenuSeparator and MenuHeader.
| Prop | Type | Default |
|---|---|---|
onOpenChangeEvery open and close: the trigger, choosing an item, outside clicks, Escape. | ((open: boolean) => void) | — |
<MenuTrigger>
The button that opens the menu. Give it an aria-label when it shows only an icon or avatar; the menu is named after it. With asChild, your own button instead.
| Prop | Type | Default |
|---|---|---|
asChildPut the trigger's props on your own button element instead of rendering one. | boolean | — |
<MenuContent>
The menu panel: glass, below the button (above it if there's no room), lined up with its end edge by default.
| Prop | Type | Default |
|---|---|---|
alignWhich edge of the button the menu lines up with (default end), or centred on it. | "center" | "end" | "start" | end |
offsetGap between the button and the menu, in px. | number | 6 |
<MenuItem>
One choice in a Menu: closes the menu, then runs onSelect. An icon sits before the label (muted, or red with the label when destructive). With asChild, the item's role and styles go onto your own element instead, such as a router's Link.
| Prop | Type | Default |
|---|---|---|
asChildPut the item's role and styles on the single child element (a link) instead of a button. | boolean | — |
destructiveRed, for actions that remove or leave something. | boolean | — |
iconShown before the label; size it yourself (e.g. size-4). | ReactNode | — |
onSelectRuns after the menu closes. | (() => void) | — |
<MenuSeparator>
A hairline between groups of items.
| Prop | Type | Default |
|---|---|---|
className | string | — |
<MenuHeader>
Content at the top of a menu that isn't a choice, e.g. who is signed in.
No props of its own; it accepts the props of the element it renders.