Dropdown

Navigation

A menu that appears on trigger, containing a list of actions or options. Use dropdowns for contextual actions, navigation menus, or option lists.

Import

import { 
  Dropdown, 
  DropdownTrigger, 
  DropdownMenu, 
  DropdownItem,
  DropdownSeparator,
  DropdownLabel 
} from "@/components/ui/dropdown";

Usage

Basic Dropdown

Simple dropdown with actions

With Icons and Shortcuts

Dropdown items with icons and keyboard shortcuts

With Sections

Grouped dropdown items with labels

Custom Trigger

Using a custom button as trigger

API Reference

PropTypeDefaultDescription
children*ReactNodeDropdown trigger and menu components

Related Components