---
title: "Dropdown Menu"
description: "A floating menu panel with icon, label and description items that highlight in brand color."
---

A floating menu panel with icon, label and description items that highlight in brand color. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Dropdown Menu — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add dropdown
```

Files written — React: components/ui/dropdown.tsx. Vue: components/ui/dropdown/Dropdown.vue, components/ui/dropdown/DropdownItem.vue, components/ui/dropdown/DropdownIcon.vue, components/ui/dropdown/DropdownContent.vue, components/ui/dropdown/DropdownLabel.vue, components/ui/dropdown/DropdownDescription.vue, components/ui/dropdown/DropdownDivider.vue, components/ui/dropdown/index.ts.

## Usage

React:

```tsx
import { Dropdown } from "@/components/ui/dropdown"
```

Vue:

```ts
import { Dropdown, DropdownItem, DropdownIcon, DropdownContent, DropdownLabel, DropdownDescription, DropdownDivider } from "@/components/ui/dropdown"
```

## API reference

**`DropdownItem`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | — | Highlights the item as if hovered (e.g. keyboard focus / selected). |

The registry exports `Dropdown`, `DropdownItem`, `DropdownIcon`, `DropdownContent`, `DropdownLabel`, `DropdownDescription`, `DropdownDivider`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Connect the trigger and menu with `aria-controls` and `aria-expanded`, support arrow keys and `Escape`, and return focus to the trigger on close.

## Tokens

Dropdown Menu reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.