# Menubar

> Source: https://design.nanatec.co.ke/components/menubar/
> An application-style menu bar — a horizontal row of `nana-menubar-menu` top-level menus (File, Edit, View…), each opening a dropdown of `nana-menu-item` rows. Implements the WAI-ARIA menubar pattern: roving tabindex across the triggers, arrow-key switching between menus (with the open panel following), hover-to-switch once a menu is open, and dismissal on outside click or Escape.

An application-style menu bar — a horizontal row of `nana-menubar-menu` top-level menus (File, Edit, View…), each opening a dropdown of `nana-menu-item` rows. Implements the WAI-ARIA menubar pattern: roving tabindex across the triggers, arrow-key switching between menus (with the open panel following), hover-to-switch once a menu is open, and dismissal on outside click or Escape.

## Preview

```html
<nana-menubar bordered>
  <nana-menubar-menu label="File">
    <nana-menu-item value="new" shortcut="⌘N">New</nana-menu-item>
    <nana-menu-item value="open" shortcut="⌘O">Open</nana-menu-item>
    <nana-menu-item value="close" destructive shortcut="⌘W">Close</nana-menu-item>
  </nana-menubar-menu>
  <nana-menubar-menu label="Edit">
    <nana-menu-item value="undo" shortcut="⌘Z">Undo</nana-menu-item>
    <nana-menu-item value="redo" shortcut="⇧⌘Z">Redo</nana-menu-item>
  </nana-menubar-menu>
</nana-menubar>
```

## Installation

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

## Import

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

## Basic usage

```html
<nana-menubar bordered>
  <nana-menubar-menu label="File">
    <nana-menu-item value="new" shortcut="⌘N">New</nana-menu-item>
    <nana-menu-item value="open" shortcut="⌘O">Open</nana-menu-item>
  </nana-menubar-menu>
</nana-menubar>
```

## API

## Events

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

## Slots

| Slot | Description |
|---|---|
| `(default)` | `nana-menubar-menu` children |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-menubar-bg` | — | Bar background |
| `--nana-menubar-gap` | — | Gap between top-level menus |

## CSS Parts

| Part | Description |
|---|---|
| `bar` | The horizontal bar 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/">Menu</a></li>
  <li><a href="/components/menu-item/">Menu Item</a></li>
  <li><a href="/components/menu-label/">Menu Label</a></li>
</ul>

## Storybook

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