Menu components — Menubar, MegaMenu, ContextMenu, SplitButton, SpeedDial, Dock

A list of commands, inline or as a popup attached to a button.

Live demo

Last command: none

Props

Prop	Type	Description
`model`	`MenuItem[]`	Items: { label, icon?, command?, url?, separator?, shortcut?, danger? }.
`popup`	`boolean`	Render as a floating menu opened through the ref.
`ref.toggle(event)`	`MenuHandle`	Open / close next to event.currentTarget.
`side / align`	`FloatingSide / FloatingAlign`	Placement (logical, flips at edges).

Accessibility

Menu keyboard support
Key	Action
`Arrow Down` / `Arrow Up`	Next / previous item
`Home` / `End`	First / last item
`Enter` / `Space`	Activate the item
`Escape`	Close and return focus to the trigger
`A–Z`	Jump to the next item starting with that letter

ReactComing to Vue, Svelte and Angular.

Menu · React

const menu = useRef<MenuHandle>(null);
<Button onClick={(e) => menu.current?.toggle(e)} aria-haspopup="menu">Actions</Button>
<Menu ref={menu} popup aria-label="Actions" model={[
  { label: 'Edit', icon: '✏️', shortcut: 'E', command: () => edit() },
  { separator: true },
  { label: 'Delete', icon: '🗑️', danger: true, command: () => remove() },
]} />

Menubar Link to Menubar

A horizontal application menu with nested submenus that collapses into a toggle on small screens.

Live demo

Last command: none

Props

Prop	Type	Description
`model`	`MenuItem[]`	Top-level items with optional nested items.
`start / end`	`ReactNode`	Content before / after the menu (logo, search).
`breakpoint`	`number`	Width (px) below which it collapses.
`aria-label`	`string`	Accessible name.

Accessibility

Menubar keyboard support
Key	Action
`Arrow Left` / `Arrow Right`	Move between top-level items (mirrored in RTL)
`Arrow Down`	Open the submenu
`Home` / `End`	First / last item
`Escape`	Close the submenu

ReactComing to Vue, Svelte and Angular.

Menubar · React

<Menubar aria-label="Main" start={<strong>Acme</strong>} model={[
  { label: 'File', items: [{ label: 'New', shortcut: '⌘N' }, { label: 'Open…' }] },
  { label: 'Edit', items: [{ label: 'Undo' }, { label: 'Redo' }] },
  { label: 'Help', url: '/help' },
]} />

TieredMenu Link to TieredMenu

A vertical menu whose items open nested submenus to the side.

Live demo

Inserted: none

Props

Prop	Type	Description
`model`	`MenuItem[]`	Items with nested items.
`popup`	`boolean`	Floating mode (same handle as Menu).

Accessibility

TieredMenu keyboard support
Key	Action
`Arrow Down` / `Arrow Up`	Next / previous item
`Home` / `End`	First / last item
`Enter` / `Space`	Activate the item
`Escape`	Close and return focus to the trigger
`Arrow Right` / `Arrow Left`	Open / close a submenu (mirrored in RTL)

ReactComing to Vue, Svelte and Angular.

TieredMenu · React

<TieredMenu aria-label="Insert" model={[
  { label: 'Media', items: [{ label: 'Image' }, { label: 'Video' }] },
  { label: 'Table', items: [{ label: '2 × 2' }, { label: '3 × 3' }] },
]} />

ContextMenu Link to ContextMenu

A menu that opens on right-click (or the context-menu key) over a target area.

Live demo

📄 report.pdf — right-click here (or focus and press Shift+F10)

Last command: none

Props

Prop	Type	Description
`model`	`MenuItem[]`	Items.
`targetRef`	`RefObject<HTMLElement>`	Element that opens the menu.
`ref.show(event)`	`ContextMenuHandle`	Open programmatically.
`onShow / onHide`	`() => void`	Callbacks.

Accessibility

ContextMenu keyboard support
Key	Action
`Shift + F10` / `Menu key`	Open the menu for the focused target
`Arrow Down` / `Arrow Up`	Next / previous item
`Home` / `End`	First / last item
`Enter` / `Space`	Activate the item
`Escape`	Close and return focus to the trigger

ReactComing to Vue, Svelte and Angular.

ContextMenu · React

const area = useRef<HTMLDivElement>(null);
<div ref={area} tabIndex={0}>Right-click me</div>
<ContextMenu targetRef={area} aria-label="File actions"
  model={[{ label: 'Rename' }, { label: 'Duplicate' }, { label: 'Delete', danger: true }]} />

Large dropdown panels arranged in columns, for sites with many destinations.

Live demo

Picked: none

Props

Prop	Type	Description
`model`	`MegaMenuItem[]`	Top items; items is an array of columns (MenuItem[][]).
`orientation`	`'horizontal' \| 'vertical'`	Layout.

Accessibility

MegaMenu keyboard support
Key	Action
`Arrow Left` / `Arrow Right`	Move between top items
`Arrow Down` / `Arrow Up`	Move within a panel
`Escape`	Close the panel

ReactComing to Vue, Svelte and Angular.

MegaMenu · React

<MegaMenu aria-label="Products" model={[
  { label: 'Products', items: [
    [{ label: 'Components', items: [{ label: 'Forms' }, { label: 'Charts' }] }],
    [{ label: 'Resources', items: [{ label: 'Docs' }, { label: 'Blog' }] }],
  ] },
]} />

PanelMenu Link to PanelMenu

An accordion-style navigation menu with nested groups.

Live demo

Opened: none

Props

Prop	Type	Description
`model`	`MenuItem[]`	Groups with nested items.
`multiple`	`boolean`	Allow several groups open.
`defaultExpandedKeys`	`string[]`	Initially open groups (by item key).

Accessibility

PanelMenu keyboard support
Key	Action
`Arrow Down` / `Arrow Up`	Move between items
`Arrow Right` / `Arrow Left`	Expand / collapse a group
`Home` / `End`	First / last item
`Enter` / `Space`	Activate

ReactComing to Vue, Svelte and Angular.

PanelMenu · React

<PanelMenu aria-label="Settings" multiple model={[
  { key: 'account', label: 'Account', items: [{ label: 'Profile' }, { label: 'Security' }] },
  { key: 'billing', label: 'Billing', items: [{ label: 'Invoices' }] },
]} />

Dock Link to Dock

A macOS-style launcher with icon magnification.

Live demo

Launched: none

Props

Prop	Type	Description
`model`	`MenuItem[]`	Items; icon is required, label is the accessible name.
`position`	`'bottom' \| 'top' \| 'start' \| 'end'`	Edge.
`magnification`	`boolean`	Enlarge hovered / focused items (off under reduced motion).

Accessibility

Dock keyboard support
Key	Action
`Tab`	Move between items
`Enter`	Activate

ReactComing to Vue, Svelte and Angular.

Dock · React

<Dock aria-label="Apps" model={[
  { label: 'Finder', icon: '📁' }, { label: 'Mail', icon: '✉️' }, { label: 'Music', icon: '🎵' },
]} />

SplitButton Link to SplitButton

A primary action with a menu of related secondary actions.

Live demo

Last action: none

Props

Prop	Type	Description
`label / onClick`	`ReactNode / handler`	Main action.
`model`	`MenuItem[]`	Secondary actions.
`variant / size`	`ButtonVariant / ButtonSize`	Same as Button.
`menuButtonLabel`	`string`	Accessible name of the arrow button.

Accessibility

SplitButton keyboard support
Key	Action
`Enter` / `Space`	Run the main action
`Arrow Down (on the arrow button)`	Open the menu

ReactComing to Vue, Svelte and Angular.

SplitButton · React

<SplitButton label="Save" onClick={save} model={[
  { label: 'Save as draft', command: saveDraft },
  { label: 'Save and publish', command: publish },
]} />

SpeedDial Link to SpeedDial

A floating action button that fans out related actions in a line or circle.

Live demo

Created: none

Props

Prop	Type	Description
`model`	`MenuItem[]`	Actions (icon + label).
`direction`	`'up' \| 'down' \| 'start' \| 'end' \| …`	Line direction.
`type`	`'linear' \| 'circle' \| 'semi-circle' \| 'quarter-circle'`	Layout.
`radius`	`number`	Radius for circular types.

Accessibility

SpeedDial keyboard support
Key	Action
`Enter` / `Space`	Open / close
`Arrow keys`	Move between actions
`Escape`	Close and focus the button

ReactComing to Vue, Svelte and Angular.

SpeedDial · React

<SpeedDial aria-label="Create" direction="up" model={[
  { label: 'Note', icon: '📝' }, { label: 'Photo', icon: '📷' }, { label: 'Link', icon: '🔗' },
]} />

Shows where the current page sits in the site hierarchy.

Live demo

Props

Prop	Type	Description
`items`	`{ label, href? }[]`	Trail; the last item is the current page.

Accessibility

Breadcrumb · React

<Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Projects', href: '/projects' }, { label: 'Pelagic UI' }]} />

Breadcrumb · Vue

<Breadcrumb :items="trail" />

Breadcrumb · Svelte

<Breadcrumb items={trail} />

Breadcrumb · Astro

<Breadcrumb items={trail} />

Breadcrumb · React Native

<Breadcrumb items={[{ label: 'Home', onPress: goHome }, { label: 'Pelagic UI' }]} />

Menus & navigation

Menu Link to Menu

Props

Accessibility

Menubar Link to Menubar

Props

Accessibility

TieredMenu Link to TieredMenu

Props

Accessibility

ContextMenu Link to ContextMenu

Props

Accessibility

MegaMenu Link to MegaMenu

Props

Accessibility

PanelMenu Link to PanelMenu

Props

Accessibility

Dock Link to Dock

Props

Accessibility

SplitButton Link to SplitButton

Props

Accessibility

SpeedDial Link to SpeedDial

Props

Accessibility

Accessibility

Theme

Contrast & color

Text

Reading aids

Motion & media

Interaction

Sound

Menus & navigation

Menu #Link to Menu

Props

Accessibility

Code

Menubar #Link to Menubar

Props

Accessibility

Code

TieredMenu #Link to TieredMenu

Props

Accessibility

Code

ContextMenu #Link to ContextMenu

Props

Accessibility

Code

MegaMenu #Link to MegaMenu

Props

Accessibility

Code

PanelMenu #Link to PanelMenu

Props

Accessibility

Code

Dock #Link to Dock

Props

Accessibility

Code

SplitButton #Link to SplitButton

Props

Accessibility

Code

SpeedDial #Link to SpeedDial

Props

Accessibility

Code

Breadcrumb #Link to Breadcrumb

Props

Accessibility

Code

Menu Link to Menu

Menubar Link to Menubar

TieredMenu Link to TieredMenu

ContextMenu Link to ContextMenu

MegaMenu Link to MegaMenu

PanelMenu Link to PanelMenu

Dock Link to Dock

SplitButton Link to SplitButton

SpeedDial Link to SpeedDial

Breadcrumb Link to Breadcrumb