HeroUI Dropdown

Component 5

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI Dropdown to your project and fits it to your theme.

Code

How HeroUI Dropdown is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { FilePlus, FolderOpen, Save, Trash2 } from "lucide-react"

import {
  Button,
  Description,
  Dropdown,
  Kbd,
  Label,
} from "@/components/ui/heroui-dropdown"

export default function Demo() {
  return (
    <div className="flex min-h-[360px] 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">
              <div className="flex h-8 items-start justify-center pt-px">
                <FilePlus className="size-4 shrink-0 text-muted" />
              </div>
              <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="open-file" textValue="Open file">
              <div className="flex h-8 items-start justify-center pt-px">
                <FolderOpen className="size-4 shrink-0 text-muted" />
              </div>
              <div className="flex flex-col">
                <Label>Open file</Label>
                <Description>Open an existing file</Description>
              </div>
              <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">
              <div className="flex h-8 items-start justify-center pt-px">
                <Save className="size-4 shrink-0 text-muted" />
              </div>
              <div className="flex flex-col">
                <Label>Save file</Label>
                <Description>Save the current file</Description>
              </div>
              <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"
            >
              <div className="flex h-8 items-start justify-center pt-px">
                <Trash2 className="size-4 shrink-0 text-danger" />
              </div>
              <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.Menu>
        </Dropdown.Popover>
      </Dropdown>
    </div>
  )
}