Menu - Customize
Appearance Tokens

The component may be restyled by overriding the following CSS custom properties (design tokens).

@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
​
:host {
  --ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
  --ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
  --ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
  --ds-auro-menuoption-container-color: transparent;
  --ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);
  --ds-auro-menuoption-icon-color: transparent;
  --ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
}
Stops Price Duration
Departure Arrival
See code 
<style>
  #customTokensMenu {
    --ds-auro-menu-divider-color: #c9a4db;
    --ds-auro-menuoption-container-color: #f3eaf8;
    --ds-auro-menuoption-container-border-color: #7b2d8e;
    --ds-auro-menuoption-icon-color: #5b1a6e;
    --ds-auro-menuoption-text-color: #5b1a6e;
  }
</style>
<auro-menu id="customTokensMenu" value="price">
  <auro-menuoption value="stops">Stops</auro-menuoption>
  <auro-menuoption value="price">Price</auro-menuoption>
  <auro-menuoption value="duration">Duration</auro-menuoption>
  <hr>
  <auro-menuoption value="departure">Departure</auro-menuoption>
  <auro-menuoption value="arrival">Arrival</auro-menuoption>
</auro-menu>
 Restricted Width

Use inline styles or a wrapping container to restrict the width of the menu. Long option text will wrap within the available space.

New tab New window Open file Open location
Close window Close tab
Share
Print
See code 
<auro-menu style="width: 300px">
  <auro-menuoption value="new tab">New tab</auro-menuoption>
  <auro-menuoption value="new window">New window</auro-menuoption>
  <auro-menuoption value="open file">Open file</auro-menuoption>
  <auro-menuoption value="open location">Open location</auro-menuoption>
  <hr>
  <auro-menuoption value="close window">Close window</auro-menuoption>
  <auro-menuoption value="close tab">Close tab</auro-menuoption>
  <hr>
  <auro-menuoption value="share">Share</auro-menuoption>
  <hr>
  <auro-menuoption value="print">Print</auro-menuoption>
</auro-menu>
 Scroll

Use max-height to constrain the menu height. When options overflow the container, the menu becomes scrollable.

Stops Price Duration
Apples Oranges Pears Grapes Kiwi
Person Woman Man Camera TV
Departure Arrival
Cars Trucks Boats Planes Motorcycles
See code 
<auro-menu id="alpha" style="max-height: 200px">
  <auro-menuoption value="stops">Stops</auro-menuoption>
  <auro-menuoption value="price">Price</auro-menuoption>
  <auro-menuoption value="duration">Duration</auro-menuoption>
  <hr>
  <auro-menu id="beta">
    <auro-menuoption value="apples">Apples</auro-menuoption>
    <auro-menuoption value="oranges">Oranges</auro-menuoption>
    <auro-menuoption value="pears">Pears</auro-menuoption>
    <auro-menuoption value="grapes">Grapes</auro-menuoption>
    <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
    <hr>
    <auro-menu id="charlie">
      <auro-menuoption value="person">Person</auro-menuoption>
      <auro-menuoption value="woman">Woman</auro-menuoption>
      <auro-menuoption value="man">Man</auro-menuoption>
      <auro-menuoption value="camera">Camera</auro-menuoption>
      <auro-menuoption value="tv">TV</auro-menuoption>
    </auro-menu>
  </auro-menu>
  <hr>
  <auro-menuoption value="departure">Departure</auro-menuoption>
  <auro-menuoption value="arrival">Arrival</auro-menuoption>
  <hr>
  <auro-menu id="delta">
    <auro-menuoption value="cars">Cars</auro-menuoption>
    <auro-menuoption value="trucks">Trucks</auro-menuoption>
    <auro-menuoption value="boats">Boats</auro-menuoption>
    <auro-menuoption value="planes">Planes</auro-menuoption>
    <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
  </auro-menu>
</auro-menu>
 No Checkmark

Use the nocheckmark attribute to hide the selection checkmark icon on menu options.

Stops Price Duration
Apples Oranges Pears Grapes Kiwi
Person Woman Man Camera TV
Departure Arrival
Cars Trucks Boats Planes Motorcycles
See code 
<auro-menu nocheckmark>
  <auro-menuoption value="stops">Stops</auro-menuoption>
  <auro-menuoption value="price">Price</auro-menuoption>
  <auro-menuoption value="duration">Duration</auro-menuoption>
  <hr>
  <auro-menu>
    <auro-menuoption value="apples">Apples</auro-menuoption>
    <auro-menuoption value="oranges">Oranges</auro-menuoption>
    <auro-menuoption value="pears">Pears</auro-menuoption>
    <auro-menuoption value="grapes">Grapes</auro-menuoption>
    <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
    <hr>
    <auro-menu>
      <auro-menuoption value="person">Person</auro-menuoption>
      <auro-menuoption value="woman">Woman</auro-menuoption>
      <auro-menuoption value="man">Man</auro-menuoption>
      <auro-menuoption value="camera">Camera</auro-menuoption>
      <auro-menuoption value="tv">TV</auro-menuoption>
    </auro-menu>
  </auro-menu>
  <hr>
  <auro-menuoption value="departure">Departure</auro-menuoption>
  <auro-menuoption value="arrival">Arrival</auro-menuoption>
  <hr>
  <auro-menu>
    <auro-menuoption value="cars">Cars</auro-menuoption>
    <auro-menuoption value="trucks">Trucks</auro-menuoption>
    <auro-menuoption value="boats">Boats</auro-menuoption>
    <auro-menuoption value="planes">Planes</auro-menuoption>
    <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
  </auro-menu>
</auro-menu>
 Dividers

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

New tab New window Open file Open location
Close window Close tab Save page as...
Share
Print
See code 
<auro-menu>
  <auro-menuoption value="new tab">New tab</auro-menuoption>
  <auro-menuoption value="new window">New window</auro-menuoption>
  <auro-menuoption value="open file">Open file</auro-menuoption>
  <auro-menuoption value="open location">Open location</auro-menuoption>
  <hr>
  <auro-menuoption value="close window">Close window</auro-menuoption>
  <auro-menuoption value="close tab">Close tab</auro-menuoption>
  <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
  <hr>
  <auro-menuoption value="share">Share</auro-menuoption>
  <hr>
  <auro-menuoption value="print">Print</auro-menuoption>
</auro-menu>
 Nested Menu

Nest additional auro-menu elements inside the default slot to create sub-menus. Each nested menu maintains its own selection state.

Stops Price Duration
Apples Oranges Pears Grapes Kiwi
Person Woman Man Camera TV
Departure Arrival
Cars Trucks Boats Planes Motorcycles
See code 
<auro-menu id="alpha">
  <auro-menuoption value="stops">Stops</auro-menuoption>
  <auro-menuoption value="price">Price</auro-menuoption>
  <auro-menuoption value="duration">Duration</auro-menuoption>
  <hr>
  <auro-menu id="beta">
    <auro-menuoption value="apples">Apples</auro-menuoption>
    <auro-menuoption value="oranges">Oranges</auro-menuoption>
    <auro-menuoption value="pears">Pears</auro-menuoption>
    <auro-menuoption value="grapes">Grapes</auro-menuoption>
    <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
    <hr>
    <auro-menu id="charlie">
      <auro-menuoption value="person">Person</auro-menuoption>
      <auro-menuoption value="woman">Woman</auro-menuoption>
      <auro-menuoption value="man">Man</auro-menuoption>
      <auro-menuoption value="camera">Camera</auro-menuoption>
      <auro-menuoption value="tv">TV</auro-menuoption>
    </auro-menu>
  </auro-menu>
  <hr>
  <auro-menuoption value="departure">Departure</auro-menuoption>
  <auro-menuoption value="arrival">Arrival</auro-menuoption>
  <hr>
  <auro-menu id="delta">
    <auro-menuoption value="cars">Cars</auro-menuoption>
    <auro-menuoption value="trucks">Trucks</auro-menuoption>
    <auro-menuoption value="boats">Boats</auro-menuoption>
    <auro-menuoption value="planes">Planes</auro-menuoption>
    <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
  </auro-menu>
</auro-menu>
Behavior Static Options

Add the static attribute to an auro-menuoption to make it non-interactive — the option renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers or informational rows inside a menu.

Popular Destinations Seattle (SEA) Portland (PDX) San Francisco (SFO) International London (LHR) Tokyo (NRT)
See code 
<auro-menu>
  <auro-menuoption static>Popular Destinations</auro-menuoption>
  <auro-menuoption value="sea">Seattle (SEA)</auro-menuoption>
  <auro-menuoption value="pdx">Portland (PDX)</auro-menuoption>
  <auro-menuoption value="sfo">San Francisco (SFO)</auro-menuoption>
  <auro-menuoption static>International</auro-menuoption>
  <auro-menuoption value="lhr">London (LHR)</auro-menuoption>
  <auro-menuoption value="nrt">Tokyo (NRT)</auro-menuoption>
</auro-menu>
 Match Word

Set the matchWord property to a string, and any option whose text contains that substring will render the matching portion visually highlighted. Typically driven by an input's keyup handler to power real-time filtering — this is the mechanism <auro-combobox> uses to highlight matches as the user types.

Enter a value to match in the menu
Stops Price Duration Departure Apples Oranges Peaches Arrival
See code 
<auro-input id="matchWordInput" required>
  <span slot="label">Enter a value to match in the menu</span>
</auro-input>
<br />
<auro-menu id="matchWordMenu">
  <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-menu>
    <auro-menuoption value="apples">Apples</auro-menuoption>
    <auro-menuoption value="oranges">Oranges</auro-menuoption>
    <auro-menuoption value="peaches">Peaches</auro-menuoption>
  </auro-menu>
  <auro-menuoption value="arrival">Arrival</auro-menuoption>
</auro-menu>
 Persistent Option

Add the persistent attribute to an auro-menuoption to opt it out of matchWord highlighting. The option remains fully interactive but its label is never rewritten — useful for utility rows like "Add new…" that should render identically regardless of the current filter string.

Type to highlight matches
Stops Price Duration Departure Arrival + Add a new sort option
See code 
<auro-input id="persistentExampleInput">
  <span slot="label">Type to highlight matches</span>
</auro-input>
<br />
<auro-menu id="persistentExampleMenu">
  <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-menuoption value="add" persistent>+ Add a new sort option</auro-menuoption>
</auro-menu>
 No Match Placeholder

Mark an option with the nomatch attribute to designate it as the placeholder shown when no other options match the user's input. When paired with <auro-combobox>, the combobox toggles the hidden attribute on this option automatically based on filter results.

Stops Price Duration No matching results
See code 
<auro-menu>
  <auro-menuoption value="stops">Stops</auro-menuoption>
  <auro-menuoption value="price">Price</auro-menuoption>
  <auro-menuoption value="duration">Duration</auro-menuoption>
  <auro-menuoption nomatch>No matching results</auro-menuoption>
</auro-menu>
 Disabled Options

Use the disabled attribute on auro-menuoption to prevent interaction with specific options.

New tab New window Open file Open location
Close window Close tab Save page as...
Share
Print
See code 
<auro-menu>
  <auro-menuoption value="new tab">New tab</auro-menuoption>
  <auro-menuoption value="new window">New window</auro-menuoption>
  <auro-menuoption value="open file">Open file</auro-menuoption>
  <auro-menuoption value="open location">Open location</auro-menuoption>
  <hr>
  <auro-menuoption value="close window">Close window</auro-menuoption>
  <auro-menuoption value="close tab" disabled>Close tab</auro-menuoption>
  <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
  <hr>
  <auro-menuoption value="share" disabled>Share</auro-menuoption>
  <hr>
  <auro-menuoption value="print">Print</auro-menuoption>
</auro-menu>
 Disabled Menu

Use the disabled attribute on auro-menu to disable the entire menu and all of its options.

New tab New window Open file Open location
Close window Close tab Save page as...
Share
Print
See code 
<auro-menu disabled>
  <auro-menuoption value="new tab">New tab</auro-menuoption>
  <auro-menuoption value="new window">New window</auro-menuoption>
  <auro-menuoption value="open file">Open file</auro-menuoption>
  <auro-menuoption value="open location">Open location</auro-menuoption>
  <hr>
  <auro-menuoption value="close window">Close window</auro-menuoption>
  <auro-menuoption value="close tab">Close tab</auro-menuoption>
  <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
  <hr>
  <auro-menuoption value="share">Share</auro-menuoption>
  <hr>
  <auro-menuoption value="print">Print</auro-menuoption>
</auro-menu>
 Loading

Use the loading attribute on auro-menu to indicate that options are being fetched asynchronously. Optional loadingIcon and loadingText slots let you customize the placeholder — a spinner, message, both, or neither.

Toggle Loading
Spinner + Text Text Only Spinner Only None
Loading... Stops Price Duration Departure Arrival Loading... Stops Price Duration Departure Arrival Stops Price Duration Departure Arrival Stops Price Duration Departure Arrival
See code 
<auro-button id="loadingExampleToggleButton">Toggle Loading</auro-button>
<table id="loadingExampleTable">
  <thead>
    <tr>
      <td width="25%">Spinner + Text</td>
      <td width="25%">Text Only</td>
      <td width="25%">Spinner Only</td>
      <td width="25%">None</td>
    </tr>
  </thead>
  <tr>
    <td>
      <auro-menu>
        <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
        <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>
    </td>
    <td>
      <auro-menu>
        <span slot="loadingText">Loading...</span>
        <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>
    </td>
    <td>
      <auro-menu>
        <auro-loader slot="loadingIcon" orbit xs></auro-loader>
        <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>
    </td>
    <td>
      <auro-menu>
        <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>
    </td>
</tr>
</table>
 Hidden Options

Use the hidden attribute on auro-menuoption to visually hide an option while keeping it in the DOM.

New tab New window Open file Open location
Close window Save page as...
Share
Print
See code 
<auro-menu>
  <auro-menuoption value="new tab">New tab</auro-menuoption>
  <auro-menuoption value="new window">New window</auro-menuoption>
  <auro-menuoption value="open file">Open file</auro-menuoption>
  <auro-menuoption value="open location">Open location</auro-menuoption>
  <hr>
  <auro-menuoption value="close window">Close window</auro-menuoption>
  <auro-menuoption value="close tab" hidden>Close tab</auro-menuoption>
  <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
  <hr>
  <auro-menuoption value="share" disabled>Share</auro-menuoption>
  <hr>
  <auro-menuoption value="print">Print</auro-menuoption>
</auro-menu>
 Multi-Select

Use the multiselect attribute on auro-menu to allow multiple options to be selected simultaneously.

Stops Price Duration Departure Arrival
See code 
<auro-menu multiselect>
  <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>
 Preset Value

Use the value attribute on auro-menu to set the selected option when the menu renders. The value must match a selectable option; if it matches an option marked disabled or static, no option is selected and auroMenu-selectValueFailure is dispatched.

Stops Price Duration Departure Arrival
See code 
<auro-menu value="duration">
  <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>
 Preset Value with Multi-Select

When using multiselect, set the value attribute to a JSON stringified array of values to pre-select multiple options.

Stops Price Duration Departure Arrival
See code 
<auro-menu value='["stops","duration","arrival"]' multiselect>
  <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>
 Non-Unique Option Values

Two or more auro-menuoption elements may share the same value. This is common when the value represents a coarser grouping than the option label — for example, several airports that all serve the same city. The menu tracks the specific option a user selects rather than resolving by value alone, so selecting one of several options that share a value highlights exactly the option that was chosen.

Seattle–Tacoma International (SEA) Seattle Paine Field (PAE) Portland International (PDX) Spokane International (GEG)
See code 
<auro-menu>
  <auro-menuoption value="seattle">Seattle&ndash;Tacoma International (SEA)</auro-menuoption>
  <auro-menuoption value="seattle">Seattle Paine Field (PAE)</auro-menuoption>
  <auro-menuoption value="portland">Portland International (PDX)</auro-menuoption>
  <auro-menuoption value="spokane">Spokane International (GEG)</auro-menuoption>
</auro-menu>

In multiselect mode, options that share a value are tracked independently, so each can be selected and removed on its own. Selections are stored in DOM order regardless of the order in which they were chosen.

Seattle–Tacoma International (SEA) Seattle Paine Field (PAE) Portland International (PDX) Spokane International (GEG)
See code 
<auro-menu multiselect>
  <auro-menuoption value="seattle">Seattle&ndash;Tacoma International (SEA)</auro-menuoption>
  <auro-menuoption value="seattle">Seattle Paine Field (PAE)</auro-menuoption>
  <auro-menuoption value="portland">Portland International (PDX)</auro-menuoption>
  <auro-menuoption value="spokane">Spokane International (GEG)</auro-menuoption>
</auro-menu>