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>
      <User class="mr-2 size-4" />
      Profile
    </DropdownMenuItem>
    <DropdownMenuItem>
      <CreditCard class="mr-2 size-4" />
      Billing
    </DropdownMenuItem>
    <DropdownMenuItem>
      <Settings class="mr-2 size-4" />
      Settings
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <LogOut class="mr-2 size-4" />
      Logout
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Icon button trigger

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button variant="ghost" iconOnly>
      <Ellipsis />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Delete</DropdownMenuItem>
  </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

Props

DropdownMenuContent

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

All other DropdownMenu components accept class for additional CSS classes.