Menu

Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Theme Variables

You can customize the menu container and item dimensions by overriding its CSS variables.

:root {
  --air-menu-min-width: calc(var(--spacing) * 28);
  --air-menu-radius: var(--radius-lg);
  --air-menu-padding-y: calc(var(--spacing) * 2);

  --air-menu-item-height: calc(var(--spacing) * 12);
  --air-menu-item-padding-x: calc(var(--spacing) * 4);
}

These variables define the overall radius and minimum width for the floating container, as well as the height and padding for individual menu items.

Composed Utilities

The following utilities structure the floating container and its interactive list items.

<!-- JavaScript is required to toggle data-state between 'open' and 'closed' -->
<ul class="menu shadow-2" data-state="open">
  <li>
    <button class="menu-item">Copy</button>
  </li>
  <li>
    <button class="menu-item">Paste</button>
  </li>
  <li>
    <button class="menu-item" disabled>Delete</button>
  </li>
</ul>

• menu: The main floating container. Applies menu-surface, which sets the background to surface-container, applies rounded corners, and establishes a fixed minimum width. It hides the element by default and applies a scaling and opacity entrance animation when the data-state="open" attribute is present.
• menu-item: The core composed utility for the interactive rows. It applies menu-item-base, menu-item-surface, and handles hover, focus, and disabled states automatically.

Composing Utilities

If you need custom state handling, build your menu items using the modular base and state layers.

<button class="menu-item-base menu-item-surface hover:menu-item-hover">
  Custom Action
</button>

• menu-item-base: Establishes the layout (flex items-center), sizing variables (height, padding), typography (label-large), removes default button borders, and configures smooth background transitions.

State Utilities

• menu-item-surface, menu-item-hover, menu-item-focus: Default background color mixes for standard interactions.
• menu-item-disabled: Applies cursor: not-allowed, removes pointer events, and adjusts colors to a translucent mix for the disabled state.