Menu
A dropdown of actions hung off a trigger you provide — the account menu, the download menu, a row’s overflow actions.
import { Menu, MenuItem } from '@/components/ui/Menu';Source: src/components/ui/Menu.tsx
Examples
A menu of actions
The trigger is your element; Menu clones it to attach the open handler and the aria wiring. Items can navigate (href) or act (onClick), and danger marks the destructive one.
Alignment
align="end" hangs the panel off the trigger’s right edge — what you want for anything in the top-right of a layout, where a start-aligned panel would run off screen.
Props
<Menu> props
| Prop | Type | Default | Description |
|---|---|---|---|
triggerrequired | ReactElement<{ onClick?: (e: MouseEvent) => void; 'aria-haspopup'?: string; 'aria-expanded'?: boolean; }> | — | — |
align | 'start' | 'end' | 'start' | Which edge of the trigger the panel aligns to. |
minWidth | number | 220 | Panel minimum width in px (default 220, the guide's popover width). An inline style, not a Tailwind class — a caller-supplied number can't be a static `min-w-[Npx]` string for the JIT scanner to pick up. |
className | string | '' | — |
childrenrequired | ReactNode | — | — |
<MenuItem> props
| Prop | Type | Default | Description |
|---|---|---|---|
href | InternalHref | string | — | Renders the item as a link: internal routes via the locale-aware Link, external URLs in a new tab. |
icon | ReactNode | — | — |
danger | boolean | false | Red text for destructive actions. |
childrenrequired | ReactNode | — | — |
Also accepts everything in Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> — so native attributes (id, onClick, aria-*, data-*) pass straight through.
Accessibility
- The trigger gets aria-haspopup and aria-expanded; the panel closes on Escape and on outside click.
- Items are real links or buttons, so they are reachable in tab order while open.
Usage
Do
- Give every MenuItem a unique React key when mapping — two items sharing a href will collide, which is a real bug this catalog’s own download menu once had.
- Put the destructive action last, with danger.
Don’t
- Don’t use a Menu for navigation that belongs in the navbar; a menu hides its contents.
- Don’t nest a Menu inside a Menu.