Menu

organisms

Dropdown command list. Context menu or navigation menu with items, separators, and submenus.

ARIA Role: menu

Demo

Demo for Menu (organisms)

Dropdown command list. Context menu or navigation menu with items, separators, and submenus.

Props

Prop	Type	Required	Default	Description
`items`	`MenuItem[]`	Yes	`—`	Menu items
`trigger`	`React.ReactNode`	Yes	`—`	Trigger element
`placement`	`'bottom-start' \| 'bottom-end' \| 'top-start' \| 'top-end'`	No	`'bottom-start'`	Menu position
`onAction`	`(key: string) => void`	No	`—`	Item action handler

TypeScript Interface

interface MenuProps {
  items: MenuItem[];
  trigger: React.ReactNode;
  placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
  onAction?: (key: string) => void;
}

Assertions (NASA Rule 5)

[aria]Container role='menu' (or 'menubar'), items role='menuitem'(WAI-ARIA APG)
[keyboard]Arrow keys navigate, Enter/Space activates, Escape closes(WCAG 2.1.1)
[aria]Disabled items use aria-disabled, not just CSS(WCAG 1.3.1)

Usage

Import

import { Menu } from '@epasslive/design-system'

Basic

<Menu />

With Variants

<Menu variant="primary" size="md" />