HeroUI Dropdown

Component 4

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 { LogOut, Settings, Users } from "lucide-react"

import { Avatar, Dropdown, Label } from "@/components/ui/heroui-dropdown"

export default function Demo() {
  return (
    <div className="flex min-h-[360px] items-center justify-center p-6">
      <Dropdown>
        <Dropdown.Trigger className="rounded-full">
          <Avatar>
            <Avatar.Image
              alt="Jane Doe"
              src="https://cdn.21st.dev/assets/mirror/8b/8b15ec8c71b3a381b6c8117f340742e4f429ab0b65af5c3b220d01a700f0e08d.jpg"
            />
            <Avatar.Fallback delayMs={600}>JD</Avatar.Fallback>
          </Avatar>
        </Dropdown.Trigger>
        <Dropdown.Popover>
          <div className="px-3 pt-3 pb-1">
            <div className="flex items-center gap-2">
              <Avatar size="sm">
                <Avatar.Image
                  alt="Jane"
                  src="https://cdn.21st.dev/assets/mirror/8b/8b15ec8c71b3a381b6c8117f340742e4f429ab0b65af5c3b220d01a700f0e08d.jpg"
                />
                <Avatar.Fallback delayMs={600}>JD</Avatar.Fallback>
              </Avatar>
              <div className="flex flex-col gap-0">
                <p className="text-sm leading-5 font-medium">Jane Doe</p>
                <p className="text-xs leading-none text-muted">jane@example.com</p>
              </div>
            </div>
          </div>
          <Dropdown.Menu>
            <Dropdown.Item id="dashboard" textValue="Dashboard">
              <Label>Dashboard</Label>
            </Dropdown.Item>
            <Dropdown.Item id="profile" textValue="Profile">
              <Label>Profile</Label>
            </Dropdown.Item>
            <Dropdown.Item id="settings" textValue="Settings">
              <div className="flex w-full items-center justify-between gap-2">
                <Label>Settings</Label>
                <Settings className="size-3.5 text-muted" />
              </div>
            </Dropdown.Item>
            <Dropdown.Item id="new-project" textValue="New project">
              <div className="flex w-full items-center justify-between gap-2">
                <Label>Create Team</Label>
                <Users className="size-3.5 text-muted" />
              </div>
            </Dropdown.Item>
            <Dropdown.Item id="logout" textValue="Logout" variant="danger">
              <div className="flex w-full items-center justify-between gap-2">
                <Label>Log Out</Label>
                <LogOut className="size-3.5 text-danger" />
              </div>
            </Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown.Popover>
      </Dropdown>
    </div>
  )
}