For situations where the <auro-menu> web component cannot be used, a native HTML <ul role="listbox"> element can be styled with the Auro Design System tokens to approximate the visual appearance of auro-menu. Unlike auro-hyperlink, Web Core Style Sheets does not provide a prebuilt .menu class, so the styling must be authored manually using Auro design tokens. For very simple single-select use cases, a native <select> may also be an acceptable fallback, but it does not match the menu/listbox semantics as closely as a styled <ul>.

A native <ul> can be given role="listbox" (or role="menu") and restyled with the Auro design tokens published by @aurodesignsystem/design-tokens. The pattern below replicates the spacing, hover, focus, and selected-state colors used by auro-menu.

@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
​
.menu {
  list-style: none;
  margin: 0;
  padding: var(--ds-size-100, 0.5rem) 0;
  background-color: var(--ds-color-container-primary-default, #ffffff);
  border: 1px solid var(--ds-color-border-ui-default, #6e767f);
  border-radius: var(--ds-border-radius, 4px);
}
​
.menu__option {
  padding: var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);
  color: var(--ds-color-text-primary-default, #1d1f24);
  cursor: pointer;
  user-select: none;
}
​
.menu__option:hover {
  background-color: var(--ds-color-container-ui-hover-default, #f0f5ff);
}
​
.menu__option:focus-visible {
  outline: 2px solid var(--ds-color-border-active-default, #01426a);
  outline-offset: -2px;
}
​
.menu__option[aria-selected="true"] {
  background-color: var(--ds-color-container-ui-selected-default, #01426a);
  color: var(--ds-color-text-inverse-default, #ffffff);
}
​
.menu__option[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

Apply the .menu class to a <ul> with role="listbox" and give each <li> the option role:

<ul class="menu" role="listbox" aria-label="Cabin class">
  <li class="menu__option" role="option" tabindex="0" aria-selected="true">Economy</li>
  <li class="menu__option" role="option" tabindex="-1" aria-selected="false">Premium</li>
  <li class="menu__option" role="option" tabindex="-1" aria-selected="false">First</li>
</ul>

Use aria-disabled="true" on individual options that should not be selectable:

<ul class="menu" role="listbox" aria-label="Seat">
  <li class="menu__option" role="option" tabindex="0" aria-selected="false">12A</li>
  <li class="menu__option" role="option" tabindex="-1" aria-selected="false" aria-disabled="true">12B</li>
  <li class="menu__option" role="option" tabindex="-1" aria-selected="false">12C</li>
</ul>

While the CSS above replicates the visual styling of auro-menu, the following functionality built into the auro-menu and auro-menuoption web components is not available when using plain HTML:

auro-menu tracks the active option internally (via an active CSS class on the current auro-menuoption) rather than moving DOM focus between options. In typical integrations (<auro-select>, <auro-combobox>), focus remains on the parent trigger/input and aria-activedescendant points at the active option; if you make <auro-menu> focusable (e.g., tabindex="0"), the same active-option model applies while focus is on the menu host. With plain HTML, you must pick one focus model — either roving tabindex="0"/tabindex="-1", or aria-activedescendant on the container — and wire up the DOM writes yourself on every key event.

auro-menu handles ArrowUp, ArrowDown, Enter, and Tab to move the highlight and commit selections. Native <ul> elements have no built-in keyboard model — you must wire up keydown listeners, track the highlighted index, and prevent default browser scrolling on the arrow keys yourself.

auro-menu supports a matchWord attribute that highlights matched substrings within option labels — used by auro-combobox to visually mark the user's typed input inside each filtered option. Plain HTML provides no equivalent; you must walk each option and wrap matched substrings yourself.

Type-ahead — jumping the active option to whichever entry starts with the letters the user typed — is not handled by auro-menu itself. It is provided by the parent selection component (auro-select, auro-combobox) which captures printable characters on its trigger and calls back into the menu. A plain-HTML listbox has no such wiring and would need a bespoke keydown handler that tracks a rolling character buffer and resolves it against the option list.

auro-menu detects nested auro-menu elements, applies the correct role="group", and computes indentation per level. The root menu treats all descendant options as a single flat list, so selecting an option inside a nested menu updates the root menu's value and optionSelected — the root always owns the selection state. With plain HTML, you must apply nested ARIA roles and indentation manually.

auro-menu keeps optionSelected, value, and each option's aria-selected state in sync internally. With native HTML, you must update aria-selected on every option yourself on each change and manage your own source of truth for the selected value.

auro-menu automatically applies role="listbox", aria-multiselectable, aria-busy during loading, and per-option role="option" with aria-selected and aria-disabled. Plain HTML requires you to author every one of these attributes by hand and keep them in sync with state — and to add any additional live-region announcements yourself.

auro-menu dispatches a structured set of events — auroMenu-selectedOption, auroMenu-activatedOption, auroMenu-optionsChange, auroMenu-selectValueReset, auroMenu-selectValueFailure, and auroMenu-loadingChange — so parent components can react to highlight, selection, and lifecycle changes. Native listboxes emit no equivalent events; you must dispatch your own.

auro-menu supports multiselect, exposing the selection as a JSON-stringified array via value and as an array of elements via optionSelected. With plain HTML, you must track multiple selections yourself, manage the aria-multiselectable attribute, and serialize the result manually.

In multi-select mode, clicking an already-selected option toggles it off. Native listboxes have no built-in deselect concept for individual options; you must implement the toggle behavior and update aria-selected yourself.

auro-menu exposes a value attribute that drives selection programmatically (accepting a JSON-stringified array in multi-select mode) and a single reset() method that clears all selection and validation state. With plain HTML, you must walk the list to find a matching option, set its state, and write your own reset routine.

auro-menu renders a built-in loading placeholder via loadingIcon and loadingText slots, sets aria-busy, and emits auroMenu-loadingChange when the loading attribute toggles. With plain HTML, you must render a placeholder, manage aria-busy, and signal loading transitions yourself.

auro-menu supports shape (box, round) and size (sm, md) variants that adjust spacing and corner radii consistently across the menu and its options. A CSS-only listbox must reauthor each variant by hand.

auro-menu consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped. A CSS-only listbox is tied to whichever tokens were imported at author time and will not respond to runtime theme switching the way the web component does.

Use auro-menu and auro-menuoption whenever possible. Fall back to a CSS-styled native listbox only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML — and be prepared to reimplement roving focus, keyboard navigation, selection coordination, and the full set of ARIA semantics yourself.