Skip to main content

Menu

Implemented

Dropdown command list. Context menu or navigation menu with items, separators (item.divider), custom content rows (item.content — search fields, rich blocks), and submenus. Header's responsive MoreMenu overflow composes this molecule (L8b, Wave 3 Tier-2).

Categorymolecules
Sourcecomponents/molecules/Menu/Menu.tsx
AI HintDropdown menu primitive. Use for context menus, navigation overflow (MoreMenu), and command lists. Composes with trigger patterns.

Dropdown menu anchored to a trigger element.

Menu

organisms

Portalled dropdown menu with keyboard navigation, dismiss layer, and placement control. Items are either canonical menuitem buttons (icon + label, destructive/disabled) or custom non-interactive content rows.

Usage

Provide any element as trigger — Menu clones it, wiring up aria-haspopup, aria-expanded, and the open/close toggle. The menu portals to document.body; keyboard navigation, focus management, and outside-click dismissal are built in.

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

const [open, setOpen] = useState(false)

<Menu
  open={open}
  onOpenChange={setOpen}
  trigger={<Button variant="secondary">Event actions</Button>}
  items={[
    { id: 'view', label: 'View event page', onSelect: () => setOpen(false) },
    { id: 'edit', label: 'Edit details', onSelect: () => setOpen(false) },
  ]}
/>

Props

Prop
Type
Default
Description
items*
MenuItem[]
—

Menu rows — button items (label, onSelect) or custom content rows.

trigger*
React.ReactElement
—

Element the menu anchors to; Menu injects aria-haspopup/expanded and the toggle handler.

placement
DropdownPlacement
"bottom-start"

Anchor position relative to the trigger.

open
boolean
—

Controlled open state.

defaultOpen
boolean
false

Initial open state for uncontrolled usage.

onOpenChange
(open: boolean) => void
—

Called on toggle, Escape, and outside dismiss.

ariaLabel
string
—

Accessible name for the menu (defaults to "Menu").

className
string
—

Additional CSS classes on the trigger wrapper.

id
string
—

Stable id prefix for the menu element.

Props

Preview

Menu

Prop
Type
Required
Default
Description
items
MenuItem[]
Required
—

Menu items

trigger
React.ReactNode
Required
—

Trigger element

placement
'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'
Optional
'bottom-start'

Menu position

onAction
(key: string) => void
Optional
—

Item action handler

Quick use:<Menu />

Accessibility

ARIA rolemenu

ARIA

2 rules

WAI-ARIA APG

Container role='menu' (or 'menubar'), items role='menuitem'

WCAG 1.3.1

Disabled items use aria-disabled, not just CSS

Keyboard

1 rule

WCAG 2.1.1

Arrow keys navigate, Enter/Space activates, Escape closes

Usage

Import

tsxSnippet
import { Menu } from "@epasslive/design-system"

Example 1

tsxSnippet
<Menu />

Example 2

tsxSnippet
<Menu variant="default" />

Anti-patterns

— Do not hardcode menu items — pass them via the items prop

— Avoid nesting menus deeper than two levels

Design System v4.1.0 | ePassLive