# Menu

> Source: https://design.nanatec.co.ke/components/menu/
> A menu / navigation list. Lays out `nana-menu-item` (and `nana-menu-label`) children, manages roving-tabindex keyboard navigation, and bubbles `nana-select` when an item is chosen.

A menu / navigation list. Lays out `nana-menu-item` (and `nana-menu-label`) children, manages roving-tabindex keyboard navigation, and bubbles `nana-select` when an item is chosen.

## Preview

```html
<nana-menu style="max-width:220px">
  <nana-menu-label>Actions</nana-menu-label>
  <nana-menu-item>Edit</nana-menu-item>
  <nana-menu-item>Delete</nana-menu-item>
</nana-menu>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/menu";
```

## Basic usage

```html
<nana-menu style="max-width:220px">
  <nana-menu-label>Actions</nana-menu-label>
  <nana-menu-item>Edit</nana-menu-item>
  <nana-menu-item>Delete</nana-menu-item>
</nana-menu>
```

## Items with shortcuts & states

Menu items support `shortcut`, `active`, `selected`, `destructive`, `submenu`,
and prefix icons.

```html
<nana-menu bordered style="width:15rem">
  <nana-menu-label>Actions</nana-menu-label>
  <nana-menu-item value="copy" shortcut="⌘C">
    <nana-icon slot="prefix" name="content_copy"></nana-icon>
    Copy
  </nana-menu-item>
  <nana-menu-item value="paste" shortcut="⌘V">Paste</nana-menu-item>
  <nana-menu-item value="share" submenu>Share</nana-menu-item>
  <nana-menu-item value="delete" destructive shortcut="⌘⌫">Delete</nana-menu-item>
</nana-menu>
```

## Horizontal

```html
<nana-menu orientation="horizontal">
  <nana-menu-item value="home" active>Home</nana-menu-item>
  <nana-menu-item value="docs">Docs</nana-menu-item>
  <nana-menu-item value="pricing">Pricing</nana-menu-item>
</nana-menu>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-select` | `CustomEvent` | Bubbled from a chosen item (`detail.value`) |

## Slots

| Slot | Description |
|---|---|
| `(default)` | `nana-menu-item` / `nana-menu-label` children |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-menu-bg` | — | Background |
| `--nana-menu-padding` | — | Inner padding |

## CSS Parts

| Part | Description |
|---|---|
| `menu` | The list container |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/breadcrumb/">Breadcrumb</a></li>
  <li><a href="/components/breadcrumb-item/">Breadcrumb Item</a></li>
  <li><a href="/components/menu-item/">Menu Item</a></li>
  <li><a href="/components/menu-label/">Menu Label</a></li>
  <li><a href="/components/menubar/">Menubar</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-menu--docs