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

import DropdownMenu from "@/components/ui/dropdown-menu/DropdownMenu.astro";
import DropdownMenuTrigger from "@/components/ui/dropdown-menu/DropdownMenuTrigger.astro";
import DropdownMenuContent from "@/components/ui/dropdown-menu/DropdownMenuContent.astro";
import DropdownMenuItem from "@/components/ui/dropdown-menu/DropdownMenuItem.astro";
import DropdownMenuLabel from "@/components/ui/dropdown-menu/DropdownMenuLabel.astro";
import DropdownMenuSeparator from "@/components/ui/dropdown-menu/DropdownMenuSeparator.astro";

Usage

import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
} from "@/components/ui/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.