DropdownMenu

A menu of actions or options triggered by a button.

Install

npx @beaket/ui add dropdown-menu

Import

import { Dropdown-menu } from "@/components/ui/dropdown-menu"

Examples

States

export const AllStates = () => (
  <div className="flex flex-wrap gap-4">
    <DropdownMenu>
      <DropdownMenu.Trigger asChild>
        <Button>Default</Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Label>Actions</DropdownMenu.Label>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>View</DropdownMenu.Item>
        <DropdownMenu.Item>Edit</DropdownMenu.Item>
        <DropdownMenu.Item>Delete</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu>

    <DropdownMenu>
      <DropdownMenu.Trigger asChild>
        <Button variant="outline">With Icons</Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>
          <User className="size-4" />
          Profile
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          <Settings className="size-4" />
          Settings
        </DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item variant="destructive">
          <LogOut className="size-4" />
          Log out
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu>

    <DropdownMenu>
      <DropdownMenu.Trigger asChild>
        <Button variant="stark">With Shortcuts</Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>
          Copy
          <DropdownMenu.Shortcut>⌘C</DropdownMenu.Shortcut>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          Paste
          <DropdownMenu.Shortcut>⌘V</DropdownMenu.Shortcut>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          Cut
          <DropdownMenu.Shortcut>⌘X</DropdownMenu.Shortcut>
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu>

    <DropdownMenu>
      <DropdownMenu.Trigger asChild>
        <Button variant="secondary">Disabled Items</Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>Enabled</DropdownMenu.Item>
        <DropdownMenu.Item disabled>Disabled</DropdownMenu.Item>
        <DropdownMenu.Item>Enabled</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu>
  </div>
);

Props

Name	Type	Default	Description
Item.inset	boolean \| undefined	—	Adds left padding to align with items that have icons
Item.variant	undefined \| default \| destructive	default	default \| destructive. Visual style variant of the menu item
Label.inset	boolean \| undefined	—	Adds left padding to align with items that have icons
SubTrigger.inset	boolean \| undefined	—	Adds left padding to align with items that have icons