Nusa UINusa UI

Dropdown Menu

Previous: DrawerNext: Empty

Displays a menu to the user with a list of actions or options.

Docs API Reference
registry/examples/dropdown-menu-demo.tsx
import { Button } from "@/registry/ui/button"
import {
  DropdownMenu,

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nusa-ui.vercel.app/r/dropdown-menu.json

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

With Icons

registry/examples/dropdown-menu-with-icons.tsx
import { CreditCard, LogOut, Settings, User } from "lucide-react"

import { Button } from "@/registry/ui/button"

With Checkboxes

registry/examples/dropdown-menu-checkboxes.tsx
"use client"

import * as React from "react"

With Radio Group

registry/examples/dropdown-menu-radio.tsx
"use client"

import * as React from "react"

API Reference

Dropdown Menu

ComponentDescription
DropdownMenuThe root component
DropdownMenuTriggerThe trigger element
DropdownMenuContentThe menu content
DropdownMenuItemA menu item
DropdownMenuLabelA label for items
DropdownMenuSeparatorA visual separator
DropdownMenuCheckboxItemCheckbox menu item
DropdownMenuRadioGroupRadio group container
DropdownMenuRadioItemRadio menu item
DropdownMenuSubSubmenu container
DropdownMenuSubTriggerSubmenu trigger
DropdownMenuSubContentSubmenu content

DropdownMenuItem Props

PropTypeDefaultDescription
disabledbooleanfalseDisable the item
onSelect(event: Event) => void-Callback when item is selected

DropdownMenuCheckboxItem Props

PropTypeDefaultDescription
checkedboolean-The controlled checked state
onCheckedChange(checked: boolean) => void-Callback when checked changes

DropdownMenuRadioGroup Props

PropTypeDefaultDescription
valuestring-The controlled value
onValueChange(value: string) => void-Callback when value changes
DrawerEmpty

On this page

InstallationUsageExamplesWith IconsWith CheckboxesWith Radio GroupAPI ReferenceDropdown MenuDropdownMenuItem PropsDropdownMenuCheckboxItem PropsDropdownMenuRadioGroup Props