DropdownMenu

Default

Usage

import { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from '@tryvienna/ui'

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>
        <UserIcon /> Profile
        <DropdownMenuShortcut>Cmd+P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <SettingsIcon /> Settings
        <DropdownMenuShortcut>Cmd+,</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>
        <PlusIcon /> New Team
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <LogOutIcon /> Log out
      <DropdownMenuShortcut>Cmd+Q</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Default

Default

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>
        <UserIcon /> Profile
        <DropdownMenuShortcut>Cmd+P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <SettingsIcon /> Settings
        <DropdownMenuShortcut>Cmd+,</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>
        <PlusIcon /> New Team
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <LogOutIcon /> Log out
      <DropdownMenuShortcut>Cmd+Q</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With Checkboxes

With Checkboxes

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">View Options</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>Appearance</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuCheckboxItem checked={showStatusBar} onCheckedChange={setShowStatusBar}>
      Status Bar
    </DropdownMenuCheckboxItem>
    <DropdownMenuCheckboxItem checked={showActivityBar} onCheckedChange={setShowActivityBar}>
      Activity Bar
    </DropdownMenuCheckboxItem>
    <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
      Panel
    </DropdownMenuCheckboxItem>
  </DropdownMenuContent>
</DropdownMenu>

With Radio Group

With Radio Group

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Panel Position</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
      <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
    </DropdownMenuRadioGroup>
  </DropdownMenuContent>
</DropdownMenu>

With Submenu

With Submenu

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuItem>
      <UserIcon /> Profile
    </DropdownMenuItem>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>
        <MailIcon /> Invite Users
      </DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem>
          <MailIcon /> Email
        </DropdownMenuItem>
        <DropdownMenuItem>
          <MessageSquareIcon /> Message
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <CloudIcon /> More...
        </DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <SettingsIcon /> Settings
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Destructive

Destructive

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Manage</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuItem>
      <UserIcon /> Edit Profile
    </DropdownMenuItem>
    <DropdownMenuItem>
      <SettingsIcon /> Settings
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">
      <LogOutIcon /> Delete Account
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

API Reference

DropdownMenu

Also accepts all props from DropdownMenuPrimitive.Root.

DropdownMenuPortal

Also accepts all props from DropdownMenuPrimitive.Portal.

DropdownMenuTrigger

Also accepts all props from DropdownMenuPrimitive.Trigger.

DropdownMenuContent

Prop	Type	Default	Description
sideOffset	number	4

Also accepts all props from DropdownMenuPrimitive.Content.

DropdownMenuGroup

Also accepts all props from DropdownMenuPrimitive.Group.

DropdownMenuItem

Prop	Type	Default	Description
inset	boolean | undefined	-
variant	"default" | "destructive"	default

Also accepts all props from DropdownMenuPrimitive.Item.

DropdownMenuCheckboxItem

Prop	Type	Default	Description
checked	CheckedState | undefined	-

Also accepts all props from DropdownMenuPrimitive.CheckboxItem.

DropdownMenuRadioGroup

Also accepts all props from DropdownMenuPrimitive.RadioGroup.

DropdownMenuRadioItem

Also accepts all props from DropdownMenuPrimitive.RadioItem.

DropdownMenuLabel

Prop	Type	Default	Description
inset	boolean | undefined	-

Also accepts all props from DropdownMenuPrimitive.Label.

DropdownMenuSeparator

Also accepts all props from DropdownMenuPrimitive.Separator.

DropdownMenuShortcut

Also accepts all props from span.

DropdownMenuSub

Also accepts all props from DropdownMenuPrimitive.Sub.

DropdownMenuSubTrigger

Prop	Type	Default	Description
inset	boolean | undefined	-

Also accepts all props from DropdownMenuPrimitive.SubTrigger.

DropdownMenuSubContent

Also accepts all props from DropdownMenuPrimitive.SubContent.

Data Attributes

Component	data-slot
DropdownMenu	"dropdown-menu"
DropdownMenuPortal	"dropdown-menu-portal"
DropdownMenuTrigger	"dropdown-menu-trigger"
DropdownMenuContent	"dropdown-menu-content"
DropdownMenuGroup	"dropdown-menu-group"
DropdownMenuItem	"dropdown-menu-item"
DropdownMenuCheckboxItem	"dropdown-menu-checkbox-item"
DropdownMenuRadioGroup	"dropdown-menu-radio-group"
DropdownMenuRadioItem	"dropdown-menu-radio-item"
DropdownMenuLabel	"dropdown-menu-label"
DropdownMenuSeparator	"dropdown-menu-separator"
DropdownMenuShortcut	"dropdown-menu-shortcut"
DropdownMenuSub	"dropdown-menu-sub"
DropdownMenuSubTrigger	"dropdown-menu-sub-trigger"
DropdownMenuSubContent	"dropdown-menu-sub-content"