Dropdown Menu

Displays a menu to the user—such as a set of actions or functions—triggered by a button.

radix-ui.com

Basic

Default

<DropdownMenu>
  <DropdownMenuTrigger asChild={true}>
    <Button variant="outline">
      Open Menu
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>
      Item 1
    </DropdownMenuItem>
    <DropdownMenuItem>
      Item 2
    </DropdownMenuItem>
    <DropdownMenuItem>
      Item 3
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With Label & Separator

<DropdownMenu>
  <DropdownMenuTrigger asChild={true}>
    <Button variant="outline">
      Open Menu
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>
      My Account
    </DropdownMenuLabel>
    <DropdownMenuItem>
      Profile
    </DropdownMenuItem>
    <DropdownMenuItem>
      Settings
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      Log out
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Variants

With Sub Menu

<DropdownMenu>
  <DropdownMenuTrigger asChild={true}>
    <Button variant="outline">
      Open Menu
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>
      My Profile
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <tr>
      <DropdownMenuSubTrigger>
        More Options
      </DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem>
          Option 1
        </DropdownMenuItem>
        <DropdownMenuItem>
          Option 2
        </DropdownMenuItem>
        <DropdownMenuItem>
          Option 3
        </DropdownMenuItem>
      </DropdownMenuSubContent>
    </tr>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      Log out
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With Keyboard Shortcuts

<DropdownMenu>
  <DropdownMenuTrigger asChild={true}>
    <Button variant="outline">
      Open Menu
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>
      New Tab
      <DropdownMenuShortcut>
        ⌘T
      </DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      New Window
      <DropdownMenuShortcut>
        ⌘N
      </DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      Save Page
      <DropdownMenuShortcut>
        ⌘S
      </DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Usage

Checkbox Items

<c />

Radio Items

<u />