Components
Loading preview...
Accessible dropdown menu built on React Aria, from HeroUI v3. A trigger-anchored popover menu supporting plain actions, leading icons, descriptions, keyboard shortcuts (Kbd), grouped sections with headers and separators, disabled items, single and multiple selection with check indicators, a controlled selected state, a danger/destructive variant, and a custom avatar trigger. Full keyboard navigation, typeahead, and focus management. Compound API: Dropdown / Dropdown.Trigger / Dropdown.Popover / Dropdown.Menu / Dropdown.Item / Dropdown.Section / Dropdown.ItemIndicator + Label / Header / Description / Separator / Kbd / Avatar.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-dropdown"use client"
import { FilePlus, FolderOpen, Save, Trash2 } from "lucide-react"
import { Button, Dropdown, Kbd, Label } from "@/components/ui/heroui-dropdown"
export default function Demo() {
return (
<div className="flex min-h-[320px] items-center justify-center p-6">
<Dropdown>
<Button aria-label="Menu" variant="secondary">
Actions
</Button>
<Dropdown.Popover>
<Dropdown.Menu onAction={(key) => console.log(`Selected: ${key}`)}>
<Dropdown.Item id="new-file" textValue="New file">
<FilePlus className="size-4 shrink-0 text-muted" />
<Label>New file</Label>
<Kbd className="ms-auto" slot="keyboard" variant="light">
<Kbd.Abbr keyValue="command" />
<Kbd.Content>N</Kbd.Content>
</Kbd>
</Dropdown.Item>
<Dropdown.Item id="open-file" textValue="Open file">
<FolderOpen className="size-4 shrink-0 text-muted" />
<Label>Open file</Label>
<Kbd className="ms-auto" slot="keyboard" variant="light">
<Kbd.Abbr keyValue="command" />
<Kbd.Content>O</Kbd.Content>
</Kbd>
</Dropdown.Item>
<Dropdown.Item id="save-file" textValue="Save file">
<Save className="size-4 shrink-0 text-muted" />
<Label>Save file</Label>
<Kbd className="ms-auto" slot="keyboard" variant="light">
<Kbd.Abbr keyValue="command" />
<Kbd.Content>S</Kbd.Content>
</Kbd>
</Dropdown.Item>
<Dropdown.Item
id="delete-file"
textValue="Delete file"
variant="danger"
>
<Trash2 className="size-4 shrink-0 text-danger" />
<Label>Delete file</Label>
<Kbd className="ms-auto" slot="keyboard" variant="light">
<Kbd.Abbr keyValue="command" />
<Kbd.Abbr keyValue="shift" />
<Kbd.Content>D</Kbd.Content>
</Kbd>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown.Popover>
</Dropdown>
</div>
)
}