Skip to content
quartiledocsv0.1
GitHub

Menu

Preview

An action menu anchored to a trigger, with icons, shortcut hints, separators and destructive items.

Example

const items: MenuItem[] = [
  { label: 'Duplicate chart', icon: <IconCopy />, shortcut: '⌘D', onSelect: duplicate },
  { label: 'Download PNG', icon: <IconDownload />, onSelect: download },
  { label: 'View as table', icon: <IconTable />, onSelect: showTable },
  'separator',
  { label: 'Remove from dashboard', danger: true, onSelect: remove },
];

<Menu
  label="Chart actions"
  items={items}
  trigger={<IconButton icon={<IconMore />} label="Chart actions" variant="ghost" />}
/>

Usage

The trigger element receives a ref and the ARIA attributes, so pass a Button or IconButton. shortcut is a display-only hint; wire real shortcuts with useHotkey. Use textValue for type-ahead when a label is not plain text.

Props

Menu

PropTypeDefaultDescription
triggerrequiredReactElement—The element that opens the menu, usually a Button. Receives a ref and ARIA attributes.
itemsrequiredMenuItem[]——
placement'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'left-start'Placement——
openboolean——
defaultOpenboolean——
onOpenChange(open: boolean) => void——
labelstring—Names the menu for assistive technology.
classNamestring——

MenuAction

MenuItem is a MenuAction or the string 'separator'.

PropTypeDefaultDescription
labelrequiredReactNode——
iconReactNode——
shortcutReactNode—Display-only hint: ⌘D, ⇧⌘P, T. Wire the actual shortcut with useHotkey.
dangerboolean—Destructive: shown in the danger color.
disabledboolean——
onSelect() => void——
textValuestring—Text used for type-ahead when label is not a string.

Accessibility

  • Opens on click, Enter, Space or the arrow keys.
  • Arrow keys move, Home and End jump, typing a letter jumps to the next matching item, Enter selects, Escape closes and returns focus to the trigger.
Report an issueBuilt Oct 21, 2026