Menu

A vertical dropdown list of actions or navigation options. Appears on trigger click and floats above page content.

Preview

Item types

Type	Appearance
Default	Standard text with optional icon and shortcut
With icon	Leading icon for visual identification
With shortcut	Right-aligned keyboard shortcut hint
Divider	Horizontal line separating groups
Disabled	50% opacity, no interaction
Destructive	Red text and icon for dangerous actions

Props

Prop	Type	Default	Description
items	MenuItem[]	--	Menu items array
onSelect	(value: string) => void	--	Item selection handler
align	'start' | 'end'	'start'	Alignment relative to trigger

MenuItem

Field	Type	Description
label	string	Item text
value	string	Selection value
icon	ReactNode	Leading icon
shortcut	string	Keyboard shortcut hint
danger	boolean	Destructive styling
disabled	boolean	Disables the item
divider	boolean	Renders a divider instead

Code example

React

import { Menu, MenuTrigger } from '@thepace/lexicon/components';

<MenuTrigger>
  <Button variant="secondary">Actions</Button>
  <Menu items={[
    { label: 'Edit', value: 'edit', shortcut: '⌘E' },
    { label: 'Duplicate', value: 'duplicate' },
    { divider: true },
    { label: 'Delete', value: 'delete', danger: true },
  ]} onSelect={handleAction} />
</MenuTrigger>

Vanilla HTML

<div class="lex-menu" role="menu">
  <button class="lex-menu__item" role="menuitem">
    <span class="lex-menu__label">Edit</span>
    <span class="lex-menu__shortcut">⌘E</span>
  </button>
  <div class="lex-menu__divider" role="separator"></div>
  <button class="lex-menu__item lex-menu__item--danger" role="menuitem">
    <span class="lex-menu__label">Delete</span>
  </button>
</div>

CSS class reference

Class	Purpose
.lex-menu	Floating container
.lex-menu__item	Menu item button
.lex-menu__item--active	Highlighted item
.lex-menu__item--danger	Destructive item (red)
.lex-menu__item--disabled	Disabled item
.lex-menu__icon	Leading icon
.lex-menu__label	Item text
.lex-menu__shortcut	Keyboard hint
.lex-menu__divider	Section separator

Accessibility

• Container uses role="menu".
• Items use role="menuitem".
• Dividers use role="separator".
• Arrow keys navigate between items. Home/End jump to first/last.
• Escape closes the menu and returns focus to the trigger.
• Disabled items are skipped in keyboard navigation.

Guidelines

Do

• Group related items with dividers.
• Place destructive actions at the bottom, separated by a divider.
• Show keyboard shortcuts for power users.

Don't

• Don't put more than 10 items in a single menu — use sub-menus or reorganise.
• Don't mix navigation links and action items in the same menu.