Components
Loading preview...
HeroUI dropdown menu with sections, selection, disabled items and keyboard shortcuts.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-dropdown"use client"
import {
Button,
Description,
Dropdown,
Header,
Kbd,
Label,
Separator,
} from "@/components/ui/heroui-dropdown"
export default function Demo() {
return (
<Dropdown>
<Button aria-label="Menu" variant="secondary">
Actions
</Button>
<Dropdown.Popover className="min-w-[220px]">
<Dropdown.Menu
disabledKeys={["delete-file"]}
onAction={(key) => console.log(`Selected: ${key}`)}
>
<Dropdown.Section>
<Header>Actions</Header>
<Dropdown.Item id="new-file" textValue="New file">
<div className="flex flex-col">
<Label>New file</Label>
<Description>Create a new file</Description>
</div>
<Kbd className="ms-auto" slot="keyboard" variant="light">
<Kbd.Abbr keyValue="command" />
<Kbd.Content>N</Kbd.Content>
</Kbd>
</Dropdown.Item>
<Dropdown.Item id="edit-file" textValue="Edit file">
<div className="flex flex-col">
<Label>Edit file</Label>
<Description>Make changes</Description>
</div>
<Kbd className="ms-auto" slot="keyboard" variant="light">
<Kbd.Abbr keyValue="command" />
<Kbd.Content>E</Kbd.Content>
</Kbd>
</Dropdown.Item>
</Dropdown.Section>
<Separator />
<Dropdown.Section>
<Header>Danger zone</Header>
<Dropdown.Item id="delete-file" textValue="Delete file" variant="danger">
<div className="flex flex-col">
<Label>Delete file</Label>
<Description>Move to trash</Description>
</div>
<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.Section>
</Dropdown.Menu>
</Dropdown.Popover>
</Dropdown>
)
}