Native HTML has no dedicated menu component for selection lists. <select> only accepts <option> elements with plain text. Building a rich, accessible, keyboard-navigable menu with nested groups, loading states, and multi-select support requires significant custom work. auro-menu provides this as a composable primitive.

Custom list implementations often fail to provide correct ARIA semantics, keyboard navigation, or screen reader announcements.

auro-menu provides:

• Keyboard navigation — Arrow Up/Down move the active option; Enter selects it; Tab selects and moves focus out of the menu.
• Active option tracking — The currently highlighted option is tracked programmatically, enabling aria-activedescendant patterns in parent components like auro-select and auro-combobox.
• Multi-select semantics — When multiSelect is enabled, aria-multiselectable is set on the menu.
• Loading state — aria-busy is set during loading, with customizable loading icon and text slots.

<option> elements accept only plain text. There is no native way to add icons, descriptions, or nested structure to options.

auro-menu options support:

• Full HTML content in each option
• Icons alongside option text
• Nested submenus for hierarchical navigation
• Checkmark indicators for selected options (configurable via noCheckmark)

Native <select multiple> renders a fixed-height list box that is widely considered a poor user experience. There is no checkmark feedback, and the interaction model (Ctrl+click) is unintuitive.

auro-menu provides:

• Checkmark indicators for each selected option
• A value that returns a JSON-stringified array of selections
• Click-to-toggle behavior that deselects an already-selected option
• reset() method for programmatic control

Native menus have no concept of filtering or highlighting matched text.

auro-menu supports:

• matchWord to highlight matching portions of option text as the user types (used by auro-combobox for real-time filtering)
• Programmatic navigateOptions(direction) for keyboard-driven traversal

Native selects have no loading pattern. When options are fetched asynchronously, there is no standard way to communicate this to the user.

auro-menu provides:

• A loading attribute that displays a loading indicator
• loadingIcon and loadingText slots for custom loading UI
• auroMenu-loadingChange event when the loading state changes

auro-menu is designed as a building block. It is the selection engine inside:

• auro-select — Dropdown selection
• auro-combobox — Autocomplete with filtering

This architecture means selection behavior, keyboard navigation, and ARIA semantics are consistent across all selection components.