Dropdown Menu

A menu of actions anchored to a button.

Overview

DropdownMenuTrigger clones one button. The menu is portaled, follows its trigger while a parent scrolls, and stays inside the viewport. Arrow keys move between items. Escape closes the menu and returns focus to the trigger.

Preview

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add dropdown-menu

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export function Actions() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        <Button variant="ghost" size="icon-sm" aria-label="More actions">⋮</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Examples

Account menu

Labels, groups, shortcuts, a nested invite submenu, a disabled item, and a destructive log out.

Project actions

Open, Rename, Move, Share, and Archive for a project.

User actions

View profile, Message, Copy email, and Block.

Card actions

A three-dot CardAction opens Edit, Duplicate, Archive, and Delete.

Release notes

Draft for the next publish.

Draft

Table row actions

A row menu for View, Edit, Copy ID, and Delete.

Name	Role	Actions
Aarav Sharma	Admin

In practice

A team member row pairs Avatar, a role Badge, and a menu for profile, role, invite, and removal.

Aarav Sharma

aarav@vinyaas.dev

Admin

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`open`	boolean	—	Controlled open state on DropdownMenu.
`onOpenChange`	(open: boolean) => void	—	Called when the menu opens or closes.
`align`	"start" \| "center" \| "end"	`"start"`	Horizontal alignment of DropdownMenuContent against the trigger.
`side`	"top" \| "bottom"	`"bottom"`	Preferred side. The menu flips when it would leave the viewport.
`variant`	"default" \| "destructive"	`"default"`	DropdownMenuItem color. destructive uses the danger text color.
`className`	string	—	Merged onto the part with cn.

Accessibility

The trigger uses aria-haspopup="menu" and aria-expanded.
The panel is role="menu". Items are role="menuitem".
An icon-only trigger needs an accessible name.
Disabled items stay in the menu and are skipped by the arrow keys.
Escape and Tab close the menu. Focus returns to the trigger.