Dropdown Menu

Default

A basic actions menu triggered by a button.

With Labels and Shortcuts

Group items under a label and display keyboard shortcut hints.

Installation

npx visor add dropdown-menu

This copies two files into your project:

components/ui/dropdown-menu/dropdown-menu.tsx — the component
components/ui/dropdown-menu/dropdown-menu.module.css — the styles

Usage

import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu/dropdown-menu';

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost">Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

API Reference

DropdownMenuProps

No props data available for “dropdown-menu”.

Sub-components

Component	Element	Purpose
`DropdownMenu`	-- (Radix Root)	Root component managing open/close state.
`DropdownMenuTrigger`	`<button>`	Button that opens the menu.
`DropdownMenuContent`	`<div>` (portal)	The floating menu container.
`DropdownMenuItem`	`<div>`	A clickable menu action. Supports `variant="destructive"`.
`DropdownMenuCheckboxItem`	`<div>`	A toggleable checkbox item.
`DropdownMenuRadioGroup`	`<div>`	Container for mutually exclusive radio items.
`DropdownMenuRadioItem`	`<div>`	A selectable radio option.
`DropdownMenuLabel`	`<div>`	Non-interactive group heading.
`DropdownMenuSeparator`	`<div>`	Visual divider between groups.
`DropdownMenuShortcut`	`<span>`	Keyboard shortcut hint aligned to the right.
`DropdownMenuGroup`	`<div>`	Logical grouping of related items.
`DropdownMenuSub`	--	Root for a nested sub-menu.
`DropdownMenuSubTrigger`	`<div>`	Item that opens a sub-menu on hover.
`DropdownMenuSubContent`	`<div>`	The nested sub-menu container.

Accessibility

Built on @radix-ui/react-dropdown-menu with full WAI-ARIA menu semantics.
ArrowDown / ArrowUp navigate between items; Enter or Space activates.
Sub-menus open with ArrowRight and close with ArrowLeft or Escape.
Items with variant="destructive" are visually distinct but keyboard-accessible like any other item.

Dropdown Menu

On this page