Dropdown Menu | Bearnie

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button variant="outline">Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Installation

npx bearnie add dropdown-menu

Usage

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from "@/components/bearnie/dropdown-menu"

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button>Open</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Item 1</DropdownMenuItem>
    <DropdownMenuItem>Item 2</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Align start

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button variant="outline">Align Start</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="start">
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Align center

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button variant="outline">Align Center</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="center">
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Align end

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button variant="outline">Align End</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With icons

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button variant="outline">My Account</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <HugeIcon icon={UserIcon} class="mr-2 size-4" />
      Profile
    </DropdownMenuItem>
    <DropdownMenuItem>
      <HugeIcon icon={CreditCardIcon} class="mr-2 size-4" />
      Billing
    </DropdownMenuItem>
    <DropdownMenuItem>
      <HugeIcon icon={Settings01Icon} class="mr-2 size-4" />
      Settings
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <HugeIcon icon={Logout01Icon} class="mr-2 size-4" />
      Logout
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Icon button trigger

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button variant="ghost" iconOnly>
      <HugeIcon icon={MoreHorizontalIcon} />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Submenu

Nest DropdownMenuSub inside the content to open a second-level menu on hover, click, or ArrowRight. ArrowLeft or Escape returns to the parent menu.

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button variant="outline">Share</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Copy link</DropdownMenuItem>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>Invite people</DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem>Email</DropdownMenuItem>
        <DropdownMenuItem>Message</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>More options</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Download</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Checkbox and radio items

Checkbox and radio items keep the menu open so several can be toggled in one visit. They emit dropdown-checkbox-change and dropdown-radio-change custom events (both bubble) when the selection changes.

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button variant="outline">View</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Appearance</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuCheckboxItem checked>Status bar</DropdownMenuCheckboxItem>
    <DropdownMenuCheckboxItem>Activity bar</DropdownMenuCheckboxItem>
    <DropdownMenuSeparator />
    <DropdownMenuLabel>Panel position</DropdownMenuLabel>
    <DropdownMenuRadioGroup defaultValue="bottom">
      <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
    </DropdownMenuRadioGroup>
  </DropdownMenuContent>
</DropdownMenu>

Anatomy

DropdownMenu - The root container
DropdownMenuTrigger - The element that opens the menu
DropdownMenuContent - The dropdown panel
DropdownMenuItem - Individual menu items
DropdownMenuLabel - Non-interactive label text
DropdownMenuSeparator - Visual divider between items
DropdownMenuSub - Wraps a submenu trigger and its content
DropdownMenuSubTrigger - Item that opens the submenu
DropdownMenuSubContent - The nested submenu panel
DropdownMenuCheckboxItem - Toggleable item with a check indicator
DropdownMenuRadioGroup - Groups radio items with a single selection
DropdownMenuRadioItem - Selectable item within a radio group

Props

DropdownMenuContent

Prop	Type	Default	Description
align	start \| center \| end	end	Horizontal alignment
class	string	-	Additional CSS classes

DropdownMenuItem

Prop	Type	Default	Description
href	string	-	Renders the item as a link instead of a button
disabled	boolean	false	Disables the item
destructive	boolean	false	Destructive styling
class	string	-	Additional CSS classes

DropdownMenuSubTrigger

Prop	Type	Default	Description
disabled	boolean	false	Disables the submenu trigger
inset	boolean	false	Indents the trigger to align with checkbox/radio items
class	string	-	Additional CSS classes

DropdownMenuCheckboxItem

Prop	Type	Default	Description
checked	boolean	false	Initial checked state
disabled	boolean	false	Disables the item
class	string	-	Additional CSS classes

DropdownMenuRadioGroup

Prop	Type	Default	Description
defaultValue	string	-	Initially selected value
class	string	-	Additional CSS classes

DropdownMenuRadioItem

Prop	Type	Default	Description
value	string	-	The value this item represents (required)
disabled	boolean	false	Disables the item
class	string	-	Additional CSS classes

All other DropdownMenu components accept class for additional CSS classes.

Events

Event	Target	Detail	Description
dropdown-checkbox-change	DropdownMenuCheckboxItem	`{ checked: boolean }`	Fired when a checkbox item is toggled
dropdown-radio-change	DropdownMenuRadioGroup	`{ value: string }`	Fired when the radio selection changes

Both events bubble, so a single listener on the menu (or document) can observe every change.