Dropdown Menu

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

Improve on GitHub

Installation

Add this component to your project using the npui CLI:

npx npui add dropdown-menu

Variants & Examples

Default Dropdown Menu

A basic dropdown menu with various items and groups.

Code for Default Dropdown Menu

1import { Button } 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"
11
12export function DefaultDropdownMenu() {
13  return (
14    <DropdownMenu>
15      <DropdownMenuTrigger asChild>
16        <Button variant="outline">Open</Button>
17      </DropdownMenuTrigger>
18      <DropdownMenuContent className="w-56">
19        <DropdownMenuLabel>My Account</DropdownMenuLabel>
20        <DropdownMenuSeparator />
21        <DropdownMenuGroup>
22          <DropdownMenuItem>Profile</DropdownMenuItem>
23          <DropdownMenuItem>Billing</DropdownMenuItem>
24          <DropdownMenuItem>Settings</DropdownMenuItem>
25        </DropdownMenuGroup>
26        <DropdownMenuSeparator />
27        <DropdownMenuItem>Log out</DropdownMenuItem>
28      </DropdownMenuContent>
29    </DropdownMenu>
30  )
31}

Props

These are the available props for the Dropdown Menu component:

Prop	Type	Description	Default
open	boolean	Controls the open state of the dropdown menu.	-
onOpenChange	(open: boolean) => void	Event handler called when the open state changes.	-
defaultOpen	boolean	The initial open state of the dropdown menu.	false