# Menu
> Generated from menu.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, settings, admin.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `items` | JSON tree | `[]` | Rows. Leaf {key,label,icon?,disabled?,danger?}; submenu {key,label,icon?,children:[]}; section {type:'group',label,children:[]}; rule {type:'divider'} |
| `value` | string | `—` | The selected item's key (brand-tinted row) |
| `mode` | 'vertical' | 'inline' | 'horizontal' | `vertical` | Layout: compact list · indented sidebar tree · top nav bar |
| `select` | CustomEvent | `—` | Composed event on selection, detail { key } |

## Visual standard (measured)
- Container: white surface, 1px border #E3E3E3, radius 8, 6 padding, min-width 200
- Row: height 36 · radius 8 · SemiBold 600 · 10px gap to a 16px leading icon
- Group title: 11px uppercase, text-tertiary #8A8A8A, non-interactive section header
- Divider: 1px split #F1F1F1 rule, role=separator
- Submenu: caret rotates 90° + children expand inline (motion-mid), aria-expanded synced
- Hover: bg-hover #F7F7F7 (motion-fast + ease-out, persistent node)
- Selected: bg-accent #F9F5FF fill + color-primary #6A1EBB text
- Danger: color-error #F5222D text, error-tinted hover
- Disabled: text-disabled #B5B5B5, not-allowed

## When to use
- **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

One selection at a time — reserve the brand tint for the active row. Keep labels short and in sentence case. Group related rows under a title; rule off a destructive action with a divider and mark it danger. For a triggered overlay, put a Menu inside a Dropdown rather than reinventing the list.