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, Header, Label } from "@/components/ui/heroui-dropdown"
import { useState } from "react"
export default function Demo() {
const [selected, setSelected] = useState<Selection>(new Set(["apple"]))
return (
<Dropdown>
<Button aria-label="Menu" variant="secondary">
Fruit
</Button>
<Dropdown.Popover className="min-w-[256px]">
<Dropdown.Menu
selectedKeys={selected}
selectionMode="single"
onSelectionChange={setSelected}
>
<Dropdown.Section>
<Header>Select a fruit</Header>
<Dropdown.Item id="apple" textValue="Apple">
<Dropdown.ItemIndicator />
<Label>Apple</Label>
</Dropdown.Item>
<Dropdown.Item id="banana" textValue="Banana">
<Dropdown.ItemIndicator />
<Label>Banana</Label>
</Dropdown.Item>
<Dropdown.Item id="cherry" textValue="Cherry">
<Dropdown.ItemIndicator />
<Label>Cherry</Label>
</Dropdown.Item>
</Dropdown.Section>
<Dropdown.Item id="orange" textValue="Orange">
<Dropdown.ItemIndicator />
<Label>Orange</Label>
</Dropdown.Item>
<Dropdown.Item id="pear" textValue="Pear">
<Dropdown.ItemIndicator />
<Label>Pear</Label>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown.Popover>
</Dropdown>
)
}