Dropdown Menu

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Prop reference

Auto-generated from the component source

DropdownMenu

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof DropdownMenuPrimitive.Root>

DropdownMenuCheckboxItem

className
children
checked

React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>

DropdownMenuContent

className
sideOffset = 4

React.ComponentProps<typeof DropdownMenuPrimitive.Content>

DropdownMenuGroup

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof DropdownMenuPrimitive.Group>

DropdownMenuItem

className
inset
variant = "default"

React.ComponentProps<typeof DropdownMenuPrimitive.Item> & { inset?: boolean; variant?: "default" | "destructive"; }

DropdownMenuLabel

className
inset

React.ComponentProps<typeof DropdownMenuPrimitive.Label> & { inset?: boolean; }

DropdownMenuPortal

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof DropdownMenuPrimitive.Portal>

DropdownMenuRadioGroup

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>

DropdownMenuRadioItem

className
children

React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>

DropdownMenuSeparator

className

React.ComponentProps<typeof DropdownMenuPrimitive.Separator>

DropdownMenuShortcut

className

React.ComponentProps<"span">

DropdownMenuSub

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof DropdownMenuPrimitive.Sub>

DropdownMenuSubContent

className

React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>

DropdownMenuSubTrigger

className
inset
children

React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean; }

DropdownMenuTrigger

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>

Code

// owner: Sona
"use client";

import { MoreHorizontal } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export default function DropdownMenuExample() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <MoreHorizontal className="size-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-64">
        <DropdownMenuLabel>Actions</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          Rename project
          <DropdownMenuShortcut>⇧⌘R</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Duplicate
          <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Share with...</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>Marketing</DropdownMenuItem>
            <DropdownMenuItem>Finance</DropdownMenuItem>
            <DropdownMenuItem>Engineering</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem checked>
          Receive updates
        </DropdownMenuCheckboxItem>
        <DropdownMenuRadioGroup value="team">
          <DropdownMenuRadioItem value="team">
            Team access
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="owner">
            Owner access
          </DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Dropdown Menu

Component preview

On this page

Command Palette