Dropdown
Composable dropdown menu with dot notation, icons, and click-outside to close.
Preview
Actions
More
Installation
npx drivn add dropdownUsage
1 import { Dropdown } from "@/components/ui/dropdown" 2 import { Edit, Trash2 } from "lucide-react" 3 4 export default function Page() { 5 return ( 6 <Dropdown> 7 <Dropdown.Trigger>Menu</Dropdown.Trigger> 8 <Dropdown.Content> 9 <Dropdown.Item icon={Edit}> 10 Edit 11 </Dropdown.Item> 12 <Dropdown.Item icon={Trash2} destructive> 13 Delete 14 </Dropdown.Item> 15 </Dropdown.Content> 16 </Dropdown> 17 ) 18 }
API Reference
Dropdown
| Prop | Type | Default | Description |
|---|---|---|---|
align | "left" | "right" | "left" | Horizontal alignment of the menu relative to the trigger |
className | string | — | Additional CSS classes to apply to the dropdown container |
children | ReactNode | — | Dropdown sub-components (Trigger, Content, Item) |
Dropdown.Item
| Prop | Type | Default | Description |
|---|---|---|---|
onClick | () => void | — | Callback fired when the item is clicked |
icon | ComponentType | ReactElement | — | Icon component (Edit) or element (<Edit className="..." />) |
destructive | boolean | — | Applies destructive styling to the item |
children | ReactNode | — | Item label content |
Dropdown.Group
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Group content (Label, Item, Separator) |
className | string | — | Additional CSS classes to apply |
Dropdown.Label
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Label text content |
className | string | — | Additional CSS classes to apply |
Dropdown.Separator
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply |