# Dropdown

> Source: https://design.nanatec.co.ke/components/dropdown/
> A trigger that reveals a panel of options — single or multi-select, optionally searchable. Compose it from `nana-option` children (use `nana-menu-label` for groups). Flips above the trigger when it would overflow.

A trigger that reveals a panel of options — single or multi-select, optionally searchable. Compose it from `nana-option` children (use `nana-menu-label` for groups). Flips above the trigger when it would overflow.

## Preview

```html
<nana-dropdown label="Assign to" style="min-width:16rem">
  <nana-option value="ada">Ada Lovelace</nana-option>
  <nana-option value="alan">Alan Turing</nana-option>
  <nana-option value="paula">Paula Hawkins</nana-option>
</nana-dropdown>
```

## Installation

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

## Import

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

## Searchable

Add the `searchable` attribute to filter options as you type.

```html
<nana-dropdown label="Country" searchable style="min-width:16rem">
  <nana-option value="us">United States</nana-option>
  <nana-option value="ca">Canada</nana-option>
  <nana-option value="mx">Mexico</nana-option>
</nana-dropdown>
```

## Multi-select

Set `select="multiple"` to allow multiple selections.

```html
<nana-dropdown label="Frameworks" select="multiple" style="min-width:16rem">
  <nana-option value="react">React</nana-option>
  <nana-option value="vue">Vue</nana-option>
  <nana-option value="svelte">Svelte</nana-option>
</nana-dropdown>
```

## Grouped

Use `nana-menu-label` to group options.

```html
<nana-dropdown label="Assign to" style="min-width:16rem">
  <nana-menu-label>Design</nana-menu-label>
  <nana-option value="ada">Ada Lovelace</nana-option>
  <nana-menu-label divider>Engineering</nana-menu-label>
  <nana-option value="alan">Alan Turing</nana-option>
</nana-dropdown>
```

## Basic usage

```html
<nana-dropdown label="Assign to">
  <nana-option value="ada">Ada Lovelace</nana-option>
  <nana-option value="alan">Alan Turing</nana-option>
</nana-dropdown>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-change` | `CustomEvent` | Fired on selection (`detail.value` — string or string[]) |

## Slots

| Slot | Description |
|---|---|
| `trigger` | Custom trigger element (falls back to a default button) |
| `(default)` | `nana-option` / `nana-menu-label` children |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-dropdown-max-height` | — | Panel max height before scrolling |

## CSS Parts

| Part | Description |
|---|---|
| `panel` | The floating options panel |

## 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/button/">Button</a></li>
  <li><a href="/components/button-group/">Button Group</a></li>
  <li><a href="/components/icon-button/">Icon Button</a></li>
  <li><a href="/components/input/">Input</a></li>
  <li><a href="/components/textarea/">Textarea</a></li>
</ul>

## Storybook

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