Menu

Vertical or horizontal navigation with grouped items. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• menu, menu--horizontal, menu-item, menu-action, menu-indicator, menu-label, menu-submenu, menu-separator
• menu-shortcut

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<nav aria-label="Account">
  <ul class="menu">
    <li class="menu-item"><a class="menu-action" href="/profile" aria-current="page">Profile</a></li>
    <li class="menu-item"><a class="menu-action" href="/settings">Settings</a></li>
  </ul>
</nav>

Variants and composition

menu–horizontal changes direction. menu-label, menu-separator, menu-submenu, menu-indicator, and menu-shortcut are optional pieces around menu-action links.

Place menu-indicator directly inside menu-action; it reads that direct owner’s state. This positioned marker is different from the in-flow choice-marker common, which reads a direct parent’s aria-current="true".

Behavior and accessibility

This is navigation styling, not an ARIA menu widget. Use real links in a named nav; only add menu roles if the application implements the full keyboard model.

Reference

See the interactive Storybook specimen ↗. Continue to Meter or return to the Official preset overview.