INPUT AND SELECTION

Menu

Draft

A dropdown list of actions or options triggered by a button for overflow actions and context menus.

Usage

• Edit
• Duplicate
• Share
• Delete

Common alternative names

Dropdown menu, context menu, action menu, popover menu

---

Anatomy

A menu is composed of a dropdown container with rounded corners and a drop shadow, holding a scrollable list of menu item types. Each item type serves a different purpose within the menu.

Container

Menu items

Scroll indicator

Section

★ Standard item

More options ▶

---

☰ Reorder item

Delete item

Drop shadow

12 Round corner

---

Item types

🔍Search...

Search

An input field at the top of the menu for filtering items. Used when the menu contains many options.

Section heading

Header

A non-interactive label that groups related items into sections. Headers are not focusable.

★ Standard option

Standard

The default menu item. Displays a label with an optional leading icon. Fires an action on click.

More options▶

Chevron

A menu item with a trailing chevron indicating a drill-down into a sub-menu or nested content.

☰ Reorder item

⋮

Grabber

A draggable menu item with a grab handle icon. Used in reorderable lists where items can be rearranged by dragging.

Title text

Supporting description text that wraps to multiple lines if needed.

Paragraph

A menu item with a title and multi-line description text. Used when additional context is needed beyond a simple label.

---

Divider

A thin horizontal line separating groups of menu items. Not interactive or focusable.

Usage guidelines coming soon.

Specs

Specs coming soon.

Content

Content guidelines coming soon.

Status & changelog

Status & changelog coming soon.

Code

---

Usage

Menu renders a trigger button and a popover list of menu items. Clicking the trigger toggles the menu open. Selecting an item closes the menu and fires the item's action.

import { Menu, MenuItem } from '@arch-ui/components';

<Menu trigger={<Button kind="secondary">Actions</Button>}>
  <MenuItem onClick={() => handleEdit()}>Edit</MenuItem>
  <MenuItem onClick={() => handleDuplicate()}>Duplicate</MenuItem>
  <MenuItem onClick={() => handleDelete()} destructive>Delete</MenuItem>
</Menu>

With groups

Organise related items into labelled groups with dividers.

<Menu trigger={<Button>Options</Button>}>
  <MenuGroup label="File">
    <MenuItem>New</MenuItem>
    <MenuItem>Open</MenuItem>
    <MenuItem>Save</MenuItem>
  </MenuGroup>
  <MenuGroup label="Edit">
    <MenuItem>Undo</MenuItem>
    <MenuItem>Redo</MenuItem>
  </MenuGroup>
</Menu>

---

Disabled items

<MenuItem disabled>Cannot delete</MenuItem>

---

Expected props

Menu

Prop	Type	Default	Description
trigger	ReactNode	required	The element that opens the menu when clicked.
placement	'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'	'bottom-start'	Popover placement relative to the trigger.
children	ReactNode	required	MenuItem and MenuGroup elements.

---

MenuItem

Prop	Type	Default	Description
onClick	() => void	undefined	Called when the item is selected.
disabled	boolean	false	Disables the item.
destructive	boolean	false	Styles the item as a destructive/danger action.
children	ReactNode	required	Item label content.

---

Accessibility

• The trigger button should have aria-haspopup="menu" and aria-expanded reflecting the open state.
• The menu list uses role="menu" with each item using role="menuitem".
• Arrow keys navigate between items. Home and End jump to the first and last item.
• Escape closes the menu and returns focus to the trigger.
• Disabled items are focusable but not activatable, with aria-disabled="true".

---

Best practices

Do:

• Keep menu items concise -- use verb-first labels like "Edit", "Delete", "Share".
• Use destructive styling for irreversible actions.
• Place the most common action first in the list.

Don't:

• Do not use Menu for navigation between pages -- use a navigation component instead.
• Do not nest menus more than one level deep.
• Do not use Menu as a replacement for Select when the user needs to choose a form value.