menu
Semantic container for toolbar buttons and context menu patterns. Provides structure for groups of interactive commands.
Description
The <menu> element represents a group of commands or options. It is semantically equivalent to <ul> but signals to assistive technologies that the items represent commands rather than list content.
In Vanilla Breeze, <menu> is styled as a flexible container with variants for toolbars, context menus, vertical menus, and icon button groups.
When to Use
- Toolbars: Groups of action buttons in editors or applications
- Context menus: Dropdown menus with actions
- Action lists: Vertical lists of commands
- Button groups: Related buttons that function as a unit
- Filter controls: Pill-style toggles for filtering content
When Not to Use
- For navigation links — use
<nav> - For content lists — use
<ul>or<ol> - For dropdown selection — use
<select> - For full dropdown components — use
<drop-down>
Variants
Default Menu
The default menu displays as a horizontal flexbox container.
<menu> <li><button type="button">Action 1</button></li> <li><button type="button">Action 2</button></li> <li><button type="button">Action 3</button></li></menu>.toolbar
Horizontal toolbar with background and contained button styling.
<menu class="toolbar"> <li><button type="button" class="ghost">Bold</button></li> <li><button type="button" class="ghost">Italic</button></li> <li><button type="button" class="ghost">Underline</button></li> <li><button type="button" class="ghost">Link</button></li></menu>.context
Dropdown-style context menu with separators. Works with both buttons and links.
<menu class="context"> <li><button type="button">Cut</button></li> <li><button type="button">Copy</button></li> <li><button type="button">Paste</button></li> <li role="separator"></li> <li><button type="button">Select All</button></li></menu>.vertical
Vertical menu layout for sidebar or dropdown patterns.
<menu class="vertical"> <li><button type="button" class="ghost">Dashboard</button></li> <li><button type="button" class="ghost">Projects</button></li> <li><button type="button" class="ghost">Tasks</button></li> <li><button type="button" class="ghost">Settings</button></li></menu>.icons
Icon-only toolbar with square icon buttons.
<menu class="toolbar icons"> <li> <button type="button" class="ghost" aria-label="Bold"> <svg ...>...</svg> </button> </li> ...</menu>.pills
Pill-shaped buttons for filter or toggle patterns.
<menu class="toolbar pills"> <li><button type="button" class="ghost">All</button></li> <li><button type="button">Active</button></li> <li><button type="button" class="ghost">Completed</button></li></menu>Styling
CSS Implementation
menu { display: flex; flex-wrap: wrap; gap: var(--size-xs); margin: 0; padding: 0; list-style: none; & > li { margin: 0; }} /* Toolbar variant */menu.toolbar { display: flex; align-items: center; gap: var(--size-2xs); padding: var(--size-2xs); background: var(--color-surface-raised); border-radius: var(--radius-m);} /* Context menu variant */menu.context { flex-direction: column; gap: 0; padding: var(--size-2xs); background: var(--color-surface); border: var(--border-width-thin) solid var(--color-border); border-radius: var(--radius-m); box-shadow: 0 4px 12px oklch(0% 0 0 / 0.15); min-inline-size: 160px;}Variant Classes Summary
| Class | Description |
|---|---|
.toolbar |
Horizontal toolbar with background container |
.context |
Dropdown-style menu with shadow and separators |
.vertical |
Vertical stacking layout |
.icons |
Square icon-only buttons |
.pills |
Pill-shaped button items |
.compact |
Reduced spacing and font size |
Menu Separators
Use role="separator" on list items to create visual dividers in context menus.
Accessibility
Semantic Structure
The menu element conveys that its items are commands. Each <li> should contain a <button> or <a> for proper interaction.
ARIA Roles
role="separator"— Marks visual dividers between groups of itemsaria-label— Required on icon-only buttons to describe the actionaria-disabled— For non-functional menu items
Icon Buttons
When using icon-only buttons, always include an aria-label for screen reader users:
<button type="button" class="ghost" aria-label="Bold"> <svg ...>...</svg></button>Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Move focus between menu buttons |
| Enter / Space | Activate focused button |
Related
<button>— Primary interactive element inside menu items<li>— List item (required child)<nav>— For navigation links (not commands)<ul>— For non-command list content<dialog>— For modal menus or action sheets<context-menu>— Full-featured context menu web component<drop-down>— Dropdown menu web component
Browser Support
The <menu> element is supported in all browsers. Its semantic meaning is recognized by screen readers, though the element renders identically to <ul> by default.