Menu

Actions · src/components/Menu/Menu.tsx

A button that opens a short list of actions.

Actions, not values - a menu that sets a field is a Select. Keep it under about seven items and put anything destructive last, with tone: 'danger'.

Arrow keys move between items and wrap at both ends; Escape and a click outside close it. The arrow handling reads the live DOM rather than an index in state, so a disabled item is skipped without the component tracking which ones those are.

Import

import { Menu } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
label	React.ReactNode	The trigger's label. Also names the list for assistive technology.
items	MenuItem[]
variant	'primary' | 'secondary' | 'ghost' | 'danger'
size	'sm' | 'md' | 'lg'
align	'left' | 'right'	Which edge the list hangs from. right when the trigger sits at the end of a row.
defaultOpen	boolean
onSelect	(item: MenuItem) => void
className	string

Exported types

MenuItem