Dropdown

Overlay

Dropdown menu with collision detection, sub-menus, dividers, and keyboard navigation

Dropdown

A flexible dropdown menu and select component. Use the component-based API for menus or the options-based API for selects, filters and multi-selects.

Component-based menu

Compose Dropdown with DropdownTrigger, DropdownContent and DropdownItem to build interactive menus.

Variants & sizes

Use the options-based API for simple selects. Customize the variant and size props to match your surfaces and density.

Variants (options mode)

Sizes

Selected: none

Multi-select

Enable multiple to allow selecting more than one option. You can also enable searchable for large lists.

Basic multi-select

Selected: none

Multi-select with search

Perfect for preferences, labels or tag pickers.

Alignment

Use the align prop to control how dropdown content is aligned relative to the trigger.

Use alignment to avoid clipping near screen edges or to match your layout.

Usage Guidelines

When to Use

  • Action menus
  • Context menus
  • Account menus

Accessibility

  • Menu role with menuitem
  • Type-ahead search in menu

Performance

  • Portal rendering
  • Collision detection cached

Common Mistakes

  • Using for Select functionality
  • Too many items without search

Frequently Asked Questions

Yes, arrow keys navigate, Enter selects, Escape closes.
Yes, Dropdown supports nested submenus with hover or click reveal.

View on GitHub

See the full source code on GitHub

Related Components

View all
Command

Command palette (⌘K) with fuzzy search, grouped commands, keyboard shortcuts, and recent history

ContextMenu

Right-click context menu with nested menus, checkboxes, radio items, and keyboard shortcuts display

Dialog

Modal dialog with focus trap, backdrop click handling, scroll locking, and nested dialog support

Drawer

Side panel with directional sliding, scroll locking, and responsive mobile-first design

Previous

Drawer

Next

Empty