## Menu
A list of selectable options — a side nav, a settings list, an overflow menu — with icons, groups, submenus and danger actions.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-menu> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, admin.
Props:
- items: JSON tree, default []. Rows. Leaf {key,label,icon?,disabled?,danger?}; submenu {key,label,icon?,children:[]}; section {type:'group',label,children:[]}; rule {type:'divider'}
- value: string, default —. The selected item's key (brand-tinted row)
- mode: 'vertical' | 'inline' | 'horizontal', default vertical. Layout: compact list · indented sidebar tree · top nav bar
- select: CustomEvent, default —. Composed event on selection, detail { key }
Tokens: border, bg-container, bg-hover, bg-accent, text-default, text-tertiary, text-disabled, color-primary, color-error, border-focus, split, radius-default.
Use when: Menu (a list of destinations or options — a side nav, a settings list, an overflow list); Tabs (switching horizontal views within one screen); Dropdown (the same list should sit inside a triggered overlay, not inline).