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 type { Selection } from "@/components/ui/heroui-dropdown"
import { Button, Dropdown, Label } from "@/components/ui/heroui-dropdown"
import { useState } from "react"
export default function Demo() {
const [selected, setSelected] = useState<Selection>(new Set(["bold"]))
const selectedItems = Array.from(selected)
return (
<div className="flex min-w-sm flex-col items-center justify-center gap-4">
<p className="text-sm text-muted">
Selected: {selectedItems.length > 0 ? selectedItems.join(", ") : "None"}
</p>
<Dropdown>
<Button aria-label="Menu" variant="secondary">
Actions
</Button>
<Dropdown.Popover>
<Dropdown.Menu
selectedKeys={selected}
selectionMode="multiple"
onSelectionChange={setSelected}
>
<Dropdown.Item id="bold" textValue="Bold">
<Label>Bold</Label>
<Dropdown.ItemIndicator />
</Dropdown.Item>
<Dropdown.Item id="italic" textValue="Italic">
<Label>Italic</Label>
<Dropdown.ItemIndicator />
</Dropdown.Item>
<Dropdown.Item id="underline" textValue="Underline">
<Label>Underline</Label>
<Dropdown.ItemIndicator />
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown.Popover>
</Dropdown>
</div>
)
}