---
title: Dropdown (React) - USWDS + Tailwind
description: Reveal a short menu of related destinations or actions with a
  dropdown and keyboard-friendly controls.
---

# Dropdown

Reveal a short menu of related destinations or actions with a dropdown and keyboard-friendly controls.

## Examples

```tsx
import { Dropdown } from '@uswds-tailwind/react/dropdown'

export default function DropdownDemo() {
  return (
    <Dropdown.Root>
      <Dropdown.Trigger type="button">Services</Dropdown.Trigger>
      <Dropdown.Content>
        <Dropdown.Item value="benefits"><Dropdown.Link href="#benefits">Benefits</Dropdown.Link></Dropdown.Item>
        <Dropdown.Item value="records"><Dropdown.Link href="#records">Records</Dropdown.Link></Dropdown.Item>
      </Dropdown.Content>
    </Dropdown.Root>
  )
}
```

## Component API

Put Trigger and Content inside Root. Place each Link inside an Item with a unique value.

### Root `<div>`

Owns menu visibility and selection behavior.

| Prop | Type | Default | Description |
| - | - | - | - |
| `onOpenChange` | `({ open: boolean }) => void` | `—` | Receives open-state changes. |
| `onItemSelect` | `({ value: string }) => void` | `—` | Receives an item selection. |
| `open` | `boolean` | `—` | Controlled menu visibility. Update after onOpenChange to accept a request. |
| `defaultOpen` | `boolean` | `false` | Initial uncontrolled menu visibility. |
| `ids` | `{ root?: string; trigger?: string; content?: string }` | `—` | Overrides generated part IDs. Use Root IDs when a label or external control needs a stable input or trigger target. |

| Attribute | Value | Purpose |
| - | - | - |
| `data-state` | `open \| closed` | Style the open and closed states. |

### Trigger `<button>`

Opens and closes the menu; accepts Button styling props.

| Attribute | Value | Purpose |
| - | - | - |
| `data-state` | `open \| closed` | Style the open and closed states. |

### Content `<ul>`

Put Item parts here; visibility follows Root state.

| Attribute | Value | Purpose |
| - | - | - |
| `data-state` | `open \| closed` | Style the open and closed states. |

### Item `<li>`

Provides an item value to the menu.

| Prop | Type | Description |
| - | - | - |
| `value` | `string (required)` | Unique value for selection. |

### Link `<a>`

Put a destination link inside Item.