Dropdown

Overlay

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

Dropdown

A pure menu component for navigation and actions. Items can link to URLs or trigger actions. Use the component-based API for flexible menus or the props-based API for simple dropdowns.

Basic Menu

Compose Dropdown with DropdownTrigger, DropdownContent and DropdownItem to build interactive menus. Items support both navigation (href) and actions (onSelect).

Variants & Sizes

Customize the variant and size props to match your design system.

Variants

Sizes

With Icons & Shortcuts

Add icons and keyboard shortcuts to menu items for better UX.

With Groups & Separators

Organize menu items with DropdownGroup and DropdownSeparator for better hierarchy.

With Avatars & Descriptions

Rich menu items with avatars, descriptions, and badges.

Team Member Menu

Plans Menu

Navigation with Links

Use href prop to turn menu items into navigation links. Perfect for navigation menus and quick actions.

Custom Trigger

Use asChild prop on DropdownTrigger to render custom triggers like buttons with gradients or icons.

Props-Based API

For simple use cases, pass options array directly. Great for quick menus without complex layouts.

States & Validation

Display loading states, disabled states, error messages, and helper text.

With Error

Please choose an action

With Helper Text

Choose an action for this category

Loading

Disabled

Disabled Options

Alignment

Control content alignment with the align prop.

Props-Based vs Component-Based

Choose props-based for simplicity or component-based for flexibility with links, custom actions, and complex layouts.

Props-Based (Simple)

Component-Based (Flexible)

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