Dropdown Menu

A trigger button with a floating list of actions or options. Used in toolbars, action menus, and "more options" (...) patterns.

Preview

Props

Prop	Type	Default	Description
items	DropdownItem[]	--	Menu items
onSelect	(value: string) => void	--	Selection handler
align	'start' | 'end'	'start'	Horizontal alignment
trigger	React.ReactElement	--	Trigger button element

DropdownItem

Field	Type	Description
label	string	Item text
value	string	Selection value
icon	ReactNode	Leading icon
danger	boolean	Destructive styling
disabled	boolean	Disabled state
divider	boolean	Render as divider
active	boolean	Active/selected state

Code example

React

import { Dropdown, Button } from '@thepace/lexicon/components';

<Dropdown
  trigger={<Button variant="secondary" size="sm">Actions ▾</Button>}
  items={[
    { label: 'Edit', value: 'edit', icon: <EditIcon /> },
    { label: 'Duplicate', value: 'duplicate', icon: <CopyIcon /> },
    { divider: true },
    { label: 'Delete', value: 'delete', danger: true },
  ]}
  onSelect={handleAction}
/>

Vanilla HTML

<div class="lex-dropdown">
  <button class="lex-button lex-button--secondary lex-button--sm">Actions ▾</button>
  <div class="lex-dropdown__panel" role="menu">
    <button class="lex-dropdown__item" role="menuitem">Edit</button>
    <button class="lex-dropdown__item" role="menuitem">Duplicate</button>
    <div class="lex-dropdown__divider" role="separator"></div>
    <button class="lex-dropdown__item lex-dropdown__item--danger" role="menuitem">Delete</button>
  </div>
</div>

CSS class reference

Class	Purpose
.lex-dropdown	Wrapper container
.lex-dropdown__panel	Floating option list
.lex-dropdown__item	Menu item
.lex-dropdown__item--active	Active/selected item
.lex-dropdown__item--danger	Destructive item
.lex-dropdown__divider	Section separator

Accessibility

• Panel uses role="menu", items use role="menuitem".
• Arrow keys navigate items.
• Enter or Space selects an item.
• Escape closes the menu and returns focus to the trigger.
• Trigger uses aria-haspopup="menu" and aria-expanded.

Guidelines

Do

• Use for "more actions" menus in toolbars and table rows.
• Keep the list under 8 items.
• Separate destructive actions with a divider.

Don't

• Don't use a dropdown for navigation — use the Menu component instead.
• Don't use for form selection — use a Select input.