Skip to main content
USWDS + Tailwind

Dropdown

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

Examples

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
dropdown-demo.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.

PropTypeDefaultDescription
onOpenChange({ open: boolean }) => void—Receives open-state changes.
onItemSelect({ value: string }) => void—Receives an item selection.
openboolean—Controlled menu visibility. Update after onOpenChange to accept a request.
defaultOpenbooleanfalseInitial 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.
AttributeValuePurpose
data-stateopen | closedStyle the open and closed states.

Trigger<button>

Opens and closes the menu; accepts Button styling props.

AttributeValuePurpose
data-stateopen | closedStyle the open and closed states.

Content<ul>

Put Item parts here; visibility follows Root state.

AttributeValuePurpose
data-stateopen | closedStyle the open and closed states.

Item<li>

Provides an item value to the menu.

PropTypeDescription
valuestring (required)Unique value for selection.

Put a destination link inside Item.