D
Design System

Dropdown

Menu-style dropdown with proximity hover and animated backgrounds.

When To Use

  • Use Dropdown when content needs to appear in context without forcing a full page transition.
  • Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
  • Review the examples below to compare trigger styles, content density, and dismissal expectations.

When Not To Use

  • Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
  • Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.

Accessibility Notes

  • Move focus into the overlay when it opens and return focus to the trigger when it closes.
  • Support Escape to dismiss non-destructive overlays and ensure the trigger communicates expanded state where appropriate.
  • Do not hide critical actions behind hover-only disclosure; keyboard and touch users need equivalent access.

Key Props / API

Props

children, checkedIndex

Key exports

Dropdown, DropdownLabel, DropdownSeparator, useDropdown

Basic

Checked item with hover preview

Groups

Labels and separators