Dropdown Menu

A popup menu anchored to an action button.

Examples

No view selected

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Dropdown Menu

pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/dropdown-menu.json'

Usage

A complete example using the installed component and hook paths.

Dropdown Menu usage

"use client";import { useState } from "react";import { Button } from "@/components/ui/button";import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";function DropdownMenuPreview() {  const [choice, setChoice] = useState("No view selected");  return (    <div className="space-y-2">      <DropdownMenu>        <DropdownMenuTrigger render={<Button variant="outline" />}>Choose view</DropdownMenuTrigger>        <DropdownMenuContent>          <DropdownMenuItem onClick={() => setChoice("Grid view selected")}>            Grid view          </DropdownMenuItem>          <DropdownMenuItem onClick={() => setChoice("List view selected")}>            List view          </DropdownMenuItem>        </DropdownMenuContent>      </DropdownMenu>      <p aria-live="polite" className="text-xs text-muted-foreground">        {choice}      </p>    </div>  );}export default function Demo() {  return <DropdownMenuPreview />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

DropdownMenu

DropdownMenu props

MenuPrimitive.Root.Props & { sound?: boolean }

sound: true

DropdownMenuPortal

DropdownMenuPortal props

MenuPrimitive.Portal.Props

DropdownMenuTrigger

DropdownMenuTrigger props

MenuPrimitive.Trigger.Props & { sound?: boolean }

sound: true

DropdownMenuContent

DropdownMenuContent props

MenuPrimitive.Popup.Props &  Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">

align: "start"
alignOffset: 0
side: "bottom"
sideOffset: 4

DropdownMenuGroup

DropdownMenuGroup props

MenuPrimitive.Group.Props

DropdownMenuLabel

DropdownMenuLabel props

MenuPrimitive.GroupLabel.Props & {  inset?: boolean;}

DropdownMenuItem

DropdownMenuItem props

MenuPrimitive.Item.Props & {  inset?: boolean;  variant?: "default" | "destructive";  sound?: boolean;}

variant: "default"
sound: true

DropdownMenuCheckboxItem

DropdownMenuCheckboxItem props

MenuPrimitive.CheckboxItem.Props & {  inset?: boolean;  sound?: boolean;}

sound: true

DropdownMenuRadioGroup

DropdownMenuRadioGroup props

MenuPrimitive.RadioGroup.Props & { sound?: boolean }

sound: true

DropdownMenuRadioItem

DropdownMenuRadioItem props

MenuPrimitive.RadioItem.Props & {  inset?: boolean;}

DropdownMenuSeparator

DropdownMenuSeparator props

MenuPrimitive.Separator.Props

DropdownMenuShortcut

DropdownMenuShortcut props

React.ComponentProps<"span">

DropdownMenuSub

DropdownMenuSub props

MenuPrimitive.SubmenuRoot.Props

DropdownMenuSubTrigger

DropdownMenuSubTrigger props

MenuPrimitive.SubmenuTrigger.Props & {  inset?: boolean;} & { sound?: boolean }

sound: true

DropdownMenuSubContent

DropdownMenuSubContent props

React.ComponentProps<typeof DropdownMenuContent>

align: "start"
alignOffset: -3
side: "inline-end"
sideOffset: 0

Source

Registry JSON