# Menu Label

> Source: https://design.nanatec.co.ke/components/menu-label/
> A non-interactive section header inside a `nana-menu`.

A non-interactive section header inside a `nana-menu`.

## Preview

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

## Installation

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

## Import

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

## Basic usage

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

## API

## Slots

| Slot | Description |
|---|---|
| `(default)` | Header text |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The header element |

## 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/menubar/">Menubar</a></li>
</ul>

## Storybook

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