# Menu Item

> Source: https://design.nanatec.co.ke/components/menu-item/
> An item within a `nana-menu`: icon + label + shortcut, with selected (checkmark), destructive, disabled and submenu states. Renders as a button, or a link when `href` is set, and bubbles `nana-select`.

An item within a `nana-menu`: icon + label + shortcut, with selected (checkmark), destructive, disabled and submenu states. Renders as a button, or a link when `href` is set, and bubbles `nana-select`.

## Preview

```html
<nana-menu style="max-width:220px">
  <nana-menu-item>Item one</nana-menu-item>
  <nana-menu-item>Item two</nana-menu-item>
</nana-menu>
```

## Installation

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

## Import

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

## Basic usage

```html
<nana-menu style="max-width:220px">
  <nana-menu-item>Item one</nana-menu-item>
  <nana-menu-item>Item two</nana-menu-item>
</nana-menu>
```

## Item states

Items support `active`, `selected`, `shortcut`, `destructive`, and a `prefix`
icon slot.

```html
<nana-menu bordered style="width:15rem">
  <nana-menu-item value="home" active>Home</nana-menu-item>
  <nana-menu-item value="copy" shortcut="⌘C">
    <nana-icon slot="prefix" name="content_copy"></nana-icon>
    Copy
  </nana-menu-item>
  <nana-menu-item value="delete" destructive shortcut="⌘⌫">Delete</nana-menu-item>
</nana-menu>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-select` | `CustomEvent` | Fired on activation (`detail.value`) |

## Slots

| Slot | Description |
|---|---|
| `(default)` | The label |
| `prefix` | Leading icon (~20px) |
| `suffix` | Trailing content (falls back to the `shortcut` attribute) |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-menu-on-accent` | — | Text colour on the highlighted/selected row |

## CSS Parts

| Part | Description |
|---|---|
| `item` | The interactive row (`<a>` or `<button>`) |

## 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-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-item--docs