Dropdown Menu

A menu component for displaying a list of actions or options triggered by a button

A dropdown menu component built on Radix UI primitives. Provides accessible menus for actions, navigation, and selections.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/dropdown-menu.json

Install the dependencies:

npm install radix-ui

Copy from the nteract/elements registry.

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/registry/primitives/dropdown-menu"

export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Open</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
        <DropdownMenuItem>Log out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Examples

With Shortcuts

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuItem>
      New Cell
      <DropdownMenuShortcut>B</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      Run Cell
      <DropdownMenuShortcut>Shift+Enter</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Destructive Items

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Cell Options</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Copy Cell</DropdownMenuItem>
    <DropdownMenuItem>Cut Cell</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">Delete Cell</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With Groups

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Insert</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-48">
    <DropdownMenuLabel>Cell Type</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>Code Cell</DropdownMenuItem>
      <DropdownMenuItem>Markdown Cell</DropdownMenuItem>
      <DropdownMenuItem>Raw Cell</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

Components

The dropdown menu is composed of several components:

Component	Description
`DropdownMenu`	Root component that manages state
`DropdownMenuTrigger`	Element that opens the menu
`DropdownMenuContent`	Container for menu items
`DropdownMenuItem`	Individual menu item
`DropdownMenuCheckboxItem`	Menu item with checkbox
`DropdownMenuRadioGroup`	Group for radio items
`DropdownMenuRadioItem`	Menu item with radio selection
`DropdownMenuLabel`	Non-interactive label
`DropdownMenuSeparator`	Visual separator
`DropdownMenuShortcut`	Keyboard shortcut hint
`DropdownMenuGroup`	Groups related items
`DropdownMenuSub`	Submenu container
`DropdownMenuSubTrigger`	Element that opens submenu
`DropdownMenuSubContent`	Submenu content

Props

DropdownMenuItem

Prop	Type	Default	Description
`variant`	`"default" \| "destructive"`	`"default"`	Visual variant
`inset`	`boolean`	`false`	Add left padding for alignment with icons
`disabled`	`boolean`	`false`	Disable the item
`className`	`string`	—	Additional CSS classes

Dropdown Menu

On this page