Dropdown Menu | arctis/ui

Open a compact list of actions from a trigger. Click outside or press Escape to close it.

tsx

1import { buttonVariants } from "@/components/ui/button"2import {3  DropdownMenu,4  DropdownMenuContent,5  DropdownMenuGroup,6  DropdownMenuItem,7  DropdownMenuLabel,8  DropdownMenuSeparator,9  DropdownMenuTrigger,10} from "@/components/ui/dropdown-menu"1112export function Example() {13  return (14    <DropdownMenu>15      <DropdownMenuTrigger className={buttonVariants({ variant: "outline" })}>16        Open17      </DropdownMenuTrigger>18      <DropdownMenuContent className="w-56">19        <DropdownMenuGroup>20          <DropdownMenuLabel>My Account</DropdownMenuLabel>21          <DropdownMenuItem>Profile</DropdownMenuItem>22          <DropdownMenuItem>Billing</DropdownMenuItem>23        </DropdownMenuGroup>24        <DropdownMenuSeparator />25        <DropdownMenuGroup>26          <DropdownMenuItem>Team</DropdownMenuItem>27          <DropdownMenuItem>Subscription</DropdownMenuItem>28        </DropdownMenuGroup>29      </DropdownMenuContent>30    </DropdownMenu>31  )32}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add dropdown-menu

Usage

1import { buttonVariants } from "@/components/ui/button"2import {3  DropdownMenu,4  DropdownMenuContent,5  DropdownMenuItem,6  DropdownMenuTrigger,7} from "@/components/ui/dropdown-menu"

1<DropdownMenu>2  <DropdownMenuTrigger className={buttonVariants({ variant: "outline" })}>3    Open4  </DropdownMenuTrigger>5  <DropdownMenuContent>6    <DropdownMenuItem>Profile</DropdownMenuItem>7    <DropdownMenuItem>Billing</DropdownMenuItem>8    <DropdownMenuItem>Team</DropdownMenuItem>9    <DropdownMenuItem>Subscription</DropdownMenuItem>10  </DropdownMenuContent>11</DropdownMenu>

Composition

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuItem
    │   │   └── DropdownMenuShortcut
    │   └── DropdownMenuItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuCheckboxItem
    ├── DropdownMenuRadioGroup
    │   └── DropdownMenuRadioItem
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent
            └── DropdownMenuItem

Basic

Grouped actions with a separator. Choosing an item closes the menu.

tsx

1import { buttonVariants } from "@/components/ui/button"2import {3  DropdownMenu,4  DropdownMenuContent,5  DropdownMenuGroup,6  DropdownMenuItem,7  DropdownMenuLabel,8  DropdownMenuSeparator,9  DropdownMenuTrigger,10} from "@/components/ui/dropdown-menu"1112export function Example() {13  return (14    <DropdownMenu>15      <DropdownMenuTrigger className={buttonVariants({ variant: "outline" })}>16        Open17      </DropdownMenuTrigger>18      <DropdownMenuContent className="w-56">19        <DropdownMenuGroup>20          <DropdownMenuLabel>My Account</DropdownMenuLabel>21          <DropdownMenuItem>Profile</DropdownMenuItem>22          <DropdownMenuItem>Billing</DropdownMenuItem>23        </DropdownMenuGroup>24        <DropdownMenuSeparator />25        <DropdownMenuGroup>26          <DropdownMenuItem>Team</DropdownMenuItem>27          <DropdownMenuItem>Subscription</DropdownMenuItem>28        </DropdownMenuGroup>29      </DropdownMenuContent>30    </DropdownMenu>31  )32}

Submenu

Use DropdownMenuSub for nested actions. Hover DropdownMenuSubTrigger to open it.

tsx

1import { buttonVariants } from "@/components/ui/button"2import {3  DropdownMenu,4  DropdownMenuContent,5  DropdownMenuItem,6  DropdownMenuSeparator,7  DropdownMenuSub,8  DropdownMenuSubContent,9  DropdownMenuSubTrigger,10  DropdownMenuTrigger,11} from "@/components/ui/dropdown-menu"1213export function Example() {14  return (15    <DropdownMenu>16      <DropdownMenuTrigger className={buttonVariants({ variant: "outline" })}>17        Open18      </DropdownMenuTrigger>19      <DropdownMenuContent className="w-56">20        <DropdownMenuItem>New Tab</DropdownMenuItem>21        <DropdownMenuItem>New Window</DropdownMenuItem>22        <DropdownMenuItem disabled>New Private Window</DropdownMenuItem>23        <DropdownMenuSeparator />24        <DropdownMenuSub>25          <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>26          <DropdownMenuSubContent>27            <DropdownMenuItem>Email</DropdownMenuItem>28            <DropdownMenuItem>Message</DropdownMenuItem>29            <DropdownMenuSeparator />30            <DropdownMenuItem>More…</DropdownMenuItem>31          </DropdownMenuSubContent>32        </DropdownMenuSub>33        <DropdownMenuItem>New Team</DropdownMenuItem>34        <DropdownMenuItem>GitHub</DropdownMenuItem>35        <DropdownMenuItem>Support</DropdownMenuItem>36        <DropdownMenuItem disabled>API</DropdownMenuItem>37        <DropdownMenuSeparator />38        <DropdownMenuItem>Log out</DropdownMenuItem>39      </DropdownMenuContent>40    </DropdownMenu>41  )42}

Shortcuts

Place DropdownMenuShortcut inside an item to show a keyboard hint.

tsx

1import { buttonVariants } from "@/components/ui/button"2import {3  DropdownMenu,4  DropdownMenuContent,5  DropdownMenuItem,6  DropdownMenuShortcut,7  DropdownMenuTrigger,8} from "@/components/ui/dropdown-menu"910export function Example() {11  return (12    <DropdownMenu>13      <DropdownMenuTrigger className={buttonVariants({ variant: "outline" })}>14        Open15      </DropdownMenuTrigger>16      <DropdownMenuContent className="w-56">17        <DropdownMenuItem>18          Profile19          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>20        </DropdownMenuItem>21        <DropdownMenuItem>22          Billing23          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>24        </DropdownMenuItem>25        <DropdownMenuItem>26          Settings27          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>28        </DropdownMenuItem>29        <DropdownMenuItem>30          Keyboard shortcuts31          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>32        </DropdownMenuItem>33      </DropdownMenuContent>34    </DropdownMenu>35  )36}

Icons

Place an SVG icon before the label. Icons use a muted color by default.

tsx

1import type { SVGProps } from "react"2import { buttonVariants } from "@/components/ui/button"3import {4  DropdownMenu,5  DropdownMenuContent,6  DropdownMenuItem,7  DropdownMenuSeparator,8  DropdownMenuTrigger,9} from "@/components/ui/dropdown-menu"1011function UserIcon(props: SVGProps<SVGSVGElement>) {12  return (13    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>14      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />15      <circle cx="12" cy="7" r="4" />16    </svg>17  )18}1920function CreditCardIcon(props: SVGProps<SVGSVGElement>) {21  return (22    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>23      <rect width="20" height="14" x="2" y="5" rx="2" />24      <path d="M2 10h20" />25    </svg>26  )27}2829function SettingsIcon(props: SVGProps<SVGSVGElement>) {30  return (31    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>32      <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />33      <circle cx="12" cy="12" r="3" />34    </svg>35  )36}3738function LogOutIcon(props: SVGProps<SVGSVGElement>) {39  return (40    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>41      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />42      <polyline points="16 17 21 12 16 7" />43      <line x1="21" x2="9" y1="12" y2="12" />44    </svg>45  )46}4748export function Example() {49  return (50    <DropdownMenu>51      <DropdownMenuTrigger className={buttonVariants({ variant: "outline" })}>52        Open53      </DropdownMenuTrigger>54      <DropdownMenuContent className="w-56">55        <DropdownMenuItem>56          <UserIcon />57          Profile58        </DropdownMenuItem>59        <DropdownMenuItem>60          <CreditCardIcon />61          Billing62        </DropdownMenuItem>63        <DropdownMenuItem>64          <SettingsIcon />65          Settings66        </DropdownMenuItem>67        <DropdownMenuSeparator />68        <DropdownMenuItem>69          <LogOutIcon />70          Log out71        </DropdownMenuItem>72      </DropdownMenuContent>73    </DropdownMenu>74  )75}

Checkboxes

Use DropdownMenuCheckboxItem for independent toggles. The menu stays open so you can change several at once.

tsx

1import * as React from "react"2import { buttonVariants } from "@/components/ui/button"3import {4  DropdownMenu,5  DropdownMenuCheckboxItem,6  DropdownMenuContent,7  DropdownMenuLabel,8  DropdownMenuSeparator,9  DropdownMenuTrigger,10} from "@/components/ui/dropdown-menu"1112export function Example() {13  const [statusBar, setStatusBar] = React.useState(true)14  const [activityBar, setActivityBar] = React.useState(false)15  const [panel, setPanel] = React.useState(false)1617  return (18    <DropdownMenu>19      <DropdownMenuTrigger className={buttonVariants({ variant: "outline" })}>20        Open21      </DropdownMenuTrigger>22      <DropdownMenuContent className="w-56">23        <DropdownMenuLabel>Appearance</DropdownMenuLabel>24        <DropdownMenuSeparator />25        <DropdownMenuCheckboxItem26          checked={statusBar}27          onCheckedChange={setStatusBar}28        >29          Status Bar30        </DropdownMenuCheckboxItem>31        <DropdownMenuCheckboxItem32          checked={activityBar}33          onCheckedChange={setActivityBar}34        >35          Activity Bar36        </DropdownMenuCheckboxItem>37        <DropdownMenuCheckboxItem checked={panel} onCheckedChange={setPanel}>38          Panel39        </DropdownMenuCheckboxItem>40      </DropdownMenuContent>41    </DropdownMenu>42  )43}

Checkboxes with Icons

Checkbox items with leading icons for settings-style toggles.

tsx

1import type { SVGProps } from "react"2import * as React from "react"3import { buttonVariants } from "@/components/ui/button"4import {5  DropdownMenu,6  DropdownMenuCheckboxItem,7  DropdownMenuContent,8  DropdownMenuLabel,9  DropdownMenuSeparator,10  DropdownMenuTrigger,11} from "@/components/ui/dropdown-menu"1213function BellIcon(props: SVGProps<SVGSVGElement>) {14  return (15    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>16      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />17      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />18    </svg>19  )20}2122function MailIcon(props: SVGProps<SVGSVGElement>) {23  return (24    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>25      <rect width="20" height="16" x="2" y="4" rx="2" />26      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />27    </svg>28  )29}3031function MessageIcon(props: SVGProps<SVGSVGElement>) {32  return (33    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>34      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />35    </svg>36  )37}3839export function Example() {40  const [push, setPush] = React.useState(true)41  const [email, setEmail] = React.useState(false)42  const [messages, setMessages] = React.useState(false)4344  return (45    <DropdownMenu>46      <DropdownMenuTrigger className={buttonVariants({ variant: "outline" })}>47        Notifications48      </DropdownMenuTrigger>49      <DropdownMenuContent className="w-56">50        <DropdownMenuLabel>Notifications</DropdownMenuLabel>51        <DropdownMenuSeparator />52        <DropdownMenuCheckboxItem checked={push} onCheckedChange={setPush}>53          <BellIcon />54          Push Notifications55        </DropdownMenuCheckboxItem>56        <DropdownMenuCheckboxItem checked={email} onCheckedChange={setEmail}>57          <MailIcon />58          Email Notifications59        </DropdownMenuCheckboxItem>60        <DropdownMenuCheckboxItem61          checked={messages}62          onCheckedChange={setMessages}63        >64          <MessageIcon />65          Message Notifications66        </DropdownMenuCheckboxItem>67      </DropdownMenuContent>68    </DropdownMenu>69  )70}

Radio

DropdownMenuRadioItem inside DropdownMenuRadioGroup. One value at a time; the menu stays open while you switch.

tsx

1import * as React from "react"2import { buttonVariants } from "@/components/ui/button"3import {4  DropdownMenu,5  DropdownMenuContent,6  DropdownMenuLabel,7  DropdownMenuRadioGroup,8  DropdownMenuRadioItem,9  DropdownMenuSeparator,10  DropdownMenuTrigger,11} from "@/components/ui/dropdown-menu"1213export function Example() {14  const [plan, setPlan] = React.useState("personal")1516  return (17    <DropdownMenu>18      <DropdownMenuTrigger className={buttonVariants({ variant: "outline" })}>19        Open20      </DropdownMenuTrigger>21      <DropdownMenuContent className="w-56">22        <DropdownMenuLabel>Billing Plan</DropdownMenuLabel>23        <DropdownMenuSeparator />24        <DropdownMenuRadioGroup value={plan} onValueChange={setPlan}>25          <DropdownMenuRadioItem value="personal">Personal</DropdownMenuRadioItem>26          <DropdownMenuRadioItem value="team">Team</DropdownMenuRadioItem>27          <DropdownMenuRadioItem value="enterprise">28            Enterprise29          </DropdownMenuRadioItem>30        </DropdownMenuRadioGroup>31      </DropdownMenuContent>32    </DropdownMenu>33  )34}

Radio with Icons

Add icons to radio items when they help distinguish the choices, such as payment methods.

tsx

1import type { SVGProps } from "react"2import * as React from "react"3import { buttonVariants } from "@/components/ui/button"4import {5  DropdownMenu,6  DropdownMenuContent,7  DropdownMenuLabel,8  DropdownMenuRadioGroup,9  DropdownMenuRadioItem,10  DropdownMenuSeparator,11  DropdownMenuTrigger,12} from "@/components/ui/dropdown-menu"1314function CreditCardIcon(props: SVGProps<SVGSVGElement>) {15  return (16    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>17      <rect width="20" height="14" x="2" y="5" rx="2" />18      <path d="M2 10h20" />19    </svg>20  )21}2223function WalletIcon(props: SVGProps<SVGSVGElement>) {24  return (25    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>26      <path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" />27      <path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" />28    </svg>29  )30}3132function SmartphoneIcon(props: SVGProps<SVGSVGElement>) {33  return (34    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>35      <rect width="14" height="20" x="5" y="2" rx="2" ry="2" />36      <path d="M12 18h.01" />37    </svg>38  )39}4041export function Example() {42  const [method, setMethod] = React.useState("card")4344  return (45    <DropdownMenu>46      <DropdownMenuTrigger className={buttonVariants({ variant: "outline" })}>47        Payment Method48      </DropdownMenuTrigger>49      <DropdownMenuContent className="w-56">50        <DropdownMenuLabel>Payment Method</DropdownMenuLabel>51        <DropdownMenuSeparator />52        <DropdownMenuRadioGroup value={method} onValueChange={setMethod}>53          <DropdownMenuRadioItem value="card">54            <CreditCardIcon />55            Card56          </DropdownMenuRadioItem>57          <DropdownMenuRadioItem value="paypal">58            <WalletIcon />59            PayPal60          </DropdownMenuRadioItem>61          <DropdownMenuRadioItem value="apple">62            <SmartphoneIcon />63            Apple Pay64          </DropdownMenuRadioItem>65        </DropdownMenuRadioGroup>66      </DropdownMenuContent>67    </DropdownMenu>68  )69}

Destructive

Set variant="destructive" on DropdownMenuItem for an irreversible action. The label and icon use the destructive color.

tsx

1import type { SVGProps } from "react"2import { buttonVariants } from "@/components/ui/button"3import {4  DropdownMenu,5  DropdownMenuContent,6  DropdownMenuItem,7  DropdownMenuSeparator,8  DropdownMenuTrigger,9} from "@/components/ui/dropdown-menu"1011function PencilIcon(props: SVGProps<SVGSVGElement>) {12  return (13    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>14      <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />15      <path d="m15 5 4 4" />16    </svg>17  )18}1920function ShareIcon(props: SVGProps<SVGSVGElement>) {21  return (22    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>23      <path d="M12 2v13" /><path d="m16 6-4-4-4 4" /><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />24    </svg>25  )26}2728function ArchiveIcon(props: SVGProps<SVGSVGElement>) {29  return (30    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>31      <rect width="20" height="5" x="2" y="3" rx="1" /><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" /><path d="M10 12h4" />32    </svg>33  )34}3536function TrashIcon(props: SVGProps<SVGSVGElement>) {37  return (38    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>39      <path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />40    </svg>41  )42}4344export function Example() {45  return (46    <DropdownMenu>47      <DropdownMenuTrigger className={buttonVariants({ variant: "outline" })}>48        Open49      </DropdownMenuTrigger>50      <DropdownMenuContent className="w-56">51        <DropdownMenuItem>52          <PencilIcon />53          Edit54        </DropdownMenuItem>55        <DropdownMenuItem>56          <ShareIcon />57          Share58        </DropdownMenuItem>59        <DropdownMenuItem>60          <ArchiveIcon />61          Archive62        </DropdownMenuItem>63        <DropdownMenuSeparator />64        <DropdownMenuItem variant="destructive">65          <TrashIcon />66          Delete67        </DropdownMenuItem>68      </DropdownMenuContent>69    </DropdownMenu>70  )71}

Avatar

The trigger can contain anything, including an avatar for account switchers or profile menus.

tsx

1import {2  Avatar,3  AvatarFallback,4  AvatarImage,5} from "@/components/ui/avatar"6import { buttonVariants } from "@/components/ui/button"7import {8  DropdownMenu,9  DropdownMenuContent,10  DropdownMenuGroup,11  DropdownMenuItem,12  DropdownMenuLabel,13  DropdownMenuSeparator,14  DropdownMenuTrigger,15} from "@/components/ui/dropdown-menu"16import { cn } from "@/lib/utils"1718export function Example() {19  return (20    <DropdownMenu>21      <DropdownMenuTrigger22        className={cn(23          buttonVariants({ variant: "outline" }),24          "h-auto gap-2 px-2 py-1.5",25        )}26      >27        <Avatar>28          <AvatarImage29            src="/assets/brand/demos/avatars/avatar-1.png"30            alt="@arctic"31          />32          <AvatarFallback>AR</AvatarFallback>33        </Avatar>34        <span className="text-sm">@arctic</span>35      </DropdownMenuTrigger>36      <DropdownMenuContent className="w-56" align="center">37        <DropdownMenuLabel>Switch account</DropdownMenuLabel>38        <DropdownMenuSeparator />39        <DropdownMenuGroup>40          <DropdownMenuItem>41            <Avatar size="sm">42              <AvatarImage43                src="/assets/brand/demos/avatars/avatar-1.png"44                alt="@arctic"45              />46              <AvatarFallback>AR</AvatarFallback>47            </Avatar>48            @arctic49          </DropdownMenuItem>50          <DropdownMenuItem>51            <Avatar size="sm">52              <AvatarImage53                src="/assets/brand/demos/avatars/avatar-2.png"54                alt="@nova"55              />56              <AvatarFallback>NV</AvatarFallback>57            </Avatar>58            @nova59          </DropdownMenuItem>60          <DropdownMenuItem>61            <Avatar size="sm">62              <AvatarImage63                src="/assets/brand/demos/avatars/avatar-3.png"64                alt="@orbit"65              />66              <AvatarFallback>OR</AvatarFallback>67            </Avatar>68            @orbit69          </DropdownMenuItem>70        </DropdownMenuGroup>71        <DropdownMenuSeparator />72        <DropdownMenuItem>Log out</DropdownMenuItem>73      </DropdownMenuContent>74    </DropdownMenu>75  )76}

Complex

Combine groups, icons, shortcuts, and submenus in one menu.

tsx

1import type { SVGProps } from "react"2import { buttonVariants } from "@/components/ui/button"3import {4  DropdownMenu,5  DropdownMenuContent,6  DropdownMenuGroup,7  DropdownMenuItem,8  DropdownMenuLabel,9  DropdownMenuSeparator,10  DropdownMenuShortcut,11  DropdownMenuSub,12  DropdownMenuSubContent,13  DropdownMenuSubTrigger,14  DropdownMenuTrigger,15} from "@/components/ui/dropdown-menu"1617function UserIcon(props: SVGProps<SVGSVGElement>) {18  return (19    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>20      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />21      <circle cx="12" cy="7" r="4" />22    </svg>23  )24}2526function UsersIcon(props: SVGProps<SVGSVGElement>) {27  return (28    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>29      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />30      <circle cx="9" cy="7" r="4" />31      <path d="M22 21v-2a4 4 0 0 0-3-3.87" />32      <path d="M16 3.13a4 4 0 0 1 0 7.75" />33    </svg>34  )35}3637function PlusIcon(props: SVGProps<SVGSVGElement>) {38  return (39    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>40      <path d="M5 12h14" />41      <path d="M12 5v14" />42    </svg>43  )44}4546function CloudIcon(props: SVGProps<SVGSVGElement>) {47  return (48    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>49      <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />50    </svg>51  )52}5354function LogOutIcon(props: SVGProps<SVGSVGElement>) {55  return (56    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>57      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />58      <polyline points="16 17 21 12 16 7" />59      <line x1="21" x2="9" y1="12" y2="12" />60    </svg>61  )62}6364export function Example() {65  return (66    <DropdownMenu>67      <DropdownMenuTrigger className={buttonVariants({ variant: "outline" })}>68        Open69      </DropdownMenuTrigger>70      <DropdownMenuContent className="w-56">71        <DropdownMenuLabel>My Account</DropdownMenuLabel>72        <DropdownMenuGroup>73          <DropdownMenuItem>74            <UserIcon />75            Profile76            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>77          </DropdownMenuItem>78          <DropdownMenuItem>79            <UsersIcon />80            Team81          </DropdownMenuItem>82          <DropdownMenuItem disabled>83            <CloudIcon />84            Billing85            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>86          </DropdownMenuItem>87        </DropdownMenuGroup>88        <DropdownMenuSeparator />89        <DropdownMenuGroup>90          <DropdownMenuItem>91            <PlusIcon />92            New Team93            <DropdownMenuShortcut>⌘T</DropdownMenuShortcut>94          </DropdownMenuItem>95          <DropdownMenuSub>96            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>97            <DropdownMenuSubContent>98              <DropdownMenuItem>Email</DropdownMenuItem>99              <DropdownMenuItem>Message</DropdownMenuItem>100              <DropdownMenuSeparator />101              <DropdownMenuItem>More…</DropdownMenuItem>102            </DropdownMenuSubContent>103          </DropdownMenuSub>104        </DropdownMenuGroup>105        <DropdownMenuSeparator />106        <DropdownMenuItem>107          <LogOutIcon />108          Log out109          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>110        </DropdownMenuItem>111      </DropdownMenuContent>112    </DropdownMenu>113  )114}

API Reference

DropdownMenu

Root provider for the trigger and content.

Prop	Type	Default
children	ReactNode	—

1<DropdownMenu>2  <DropdownMenuTrigger>Open</DropdownMenuTrigger>3  <DropdownMenuContent>4    <DropdownMenuItem>Open</DropdownMenuItem>5  </DropdownMenuContent>6</DropdownMenu>

DropdownMenuTrigger

Button that toggles the menu. Style it with buttonVariants or your own classes.

Prop	Type	Default
className	string	—

1<DropdownMenuTrigger className={buttonVariants({ variant: "outline" })}>2  Open3</DropdownMenuTrigger>

DropdownMenuContent

Menu panel positioned below the trigger and kept within the viewport.

Prop	Type	Default
align	"start" \| "center" \| "end"	"center"
sideOffset	number	6
className	string	—

1<DropdownMenuContent align="end" sideOffset={8}>2  <DropdownMenuItem>Open</DropdownMenuItem>3</DropdownMenuContent>

DropdownMenuItem

Choosing an item closes the menu unless it is a checkbox or radio item.

Prop	Type	Default
variant	"default" \| "destructive"	"default"
inset	boolean	false
href	string	—
disabled	boolean	false
className	string	—

1<DropdownMenuItem href="/settings">Settings</DropdownMenuItem>

DropdownMenuCheckboxItem

Toggle that does not close the menu on click.

Prop	Type	Default
checked	boolean	false
onCheckedChange	(checked: boolean) => void	—
disabled	boolean	false
className	string	—

1<DropdownMenuCheckboxItem checked>2  Show bookmarks3</DropdownMenuCheckboxItem>

DropdownMenuRadioGroup

Exclusive selection group for DropdownMenuRadioItem.

Prop	Type	Default
value	string	""
onValueChange	(value: string) => void	—
className	string	—

1<DropdownMenuRadioGroup value="personal">2  <DropdownMenuRadioItem value="personal">Personal</DropdownMenuRadioItem>3</DropdownMenuRadioGroup>

DropdownMenuRadioItem

Must be used inside DropdownMenuRadioGroup. Does not close the menu on click.

Prop	Type	Default
value	string	—
disabled	boolean	false
className	string	—

1<DropdownMenuRadioItem value="team">Team</DropdownMenuRadioItem>

DropdownMenuLabel

Prop	Type	Default
inset	boolean	false
className	string	—

1<DropdownMenuLabel>Account</DropdownMenuLabel>

DropdownMenuShortcut

Prop	Type	Default
className	string	—

1<DropdownMenuItem>2  Save3  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>4</DropdownMenuItem>

DropdownMenuSeparator

Prop	Type	Default
className	string	—

1<DropdownMenuSeparator />

DropdownMenuGroup

Prop	Type	Default
className	string	—

1<DropdownMenuGroup>2  <DropdownMenuItem>Open</DropdownMenuItem>3</DropdownMenuGroup>

DropdownMenuSub

Prop	Type	Default
children	ReactNode	—

1<DropdownMenuSub>2  <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>3  <DropdownMenuSubContent>4    <DropdownMenuItem>Save</DropdownMenuItem>5  </DropdownMenuSubContent>6</DropdownMenuSub>

DropdownMenuSubTrigger

Prop	Type	Default
inset	boolean	false
className	string	—

1<DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>

DropdownMenuSubContent

Prop	Type	Default
className	string	—

1<DropdownMenuSubContent>2  <DropdownMenuItem>Save</DropdownMenuItem>3</DropdownMenuSubContent>