Component Anatomy

The auro-menu component is a list container that renders one or more auro-menuoption elements. The component consists of the following key elements:

Menu Container — The outer list element (role="listbox") that holds all options and manages selection state, keyboard navigation, and active/selected tracking.
Menu Option — An individual selectable item (auro-menuoption) within the menu. Each option can carry a value, display label text, and respond to selection, disabled, and hidden states.
Checkmark Icon — A visual indicator shown on the selected option(s). Can be hidden with the nocheckmark attribute.
Divider (<hr>) — A horizontal rule used to visually separate groups of options within the menu.

Menu Option

Each auro-menuoption is a focusable element that visually responds to common UI states — Hover, Active (keyboard-highlighted), Selected, and Disabled. Options support a default slot for display text and a value attribute that is used for programmatic selection.

Dividers

Use standard <hr> elements between auro-menuoption elements to create visual group separators. Dividers are non-interactive and are skipped during keyboard navigation.

Checkmark

By default, a checkmark icon appears next to the selected option(s). Use the nocheckmark attribute on auro-menu to hide this indicator when a simpler visual style is preferred.

Shape | Size | Layout Support

The auro-menu component supports the shape and size feature set. The component defaults to shape="box" and size="sm". The layout attribute is not supported by this component.

Size

Use the size attribute to change the size of menu options. Supported values are xs, sm (default), md, lg, and xl.

Stops

Price

Duration

Departure

Arrival

See code

<auro-menu size="md">
  <auro-menuoption value="stops">Stops</auro-menuoption>
  <auro-menuoption value="price">Price</auro-menuoption>
  <auro-menuoption value="duration">Duration</auro-menuoption>
  <auro-menuoption value="departure">Departure</auro-menuoption>
  <auro-menuoption value="arrival">Arrival</auro-menuoption>
</auro-menu>

Shape