Dropdown Menu

Dropdown Menu with thoughtful defaults, semantic styling, and editable source.

Make it yours.

Install the editable source and its dependencies into your React + Tailwind project.

Scroll horizontally for long lines

pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/dropdown-menu.json

Use it

Scroll horizontally for long lines

"use client";
import { useState } from "react";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuCheckboxItem,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
} from "@/components/jez-ui/ui/dropdown-menu";
import { Button } from "@/components/jez-ui/ui/button";

export default function Example() {
  const [showArchived, setShowArchived] = useState<boolean | "indeterminate">(
    true,
  );
  const [notice, setNotice] = useState("");
  const actions = [
    { label: "Duplicate", onSelect: () => setNotice("A copy is ready.") },
    { label: "Archive", onSelect: () => setNotice("Moved to archive.") },
  ];
  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline">Project actions ↓</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuLabel>Project</DropdownMenuLabel>
          {actions.map((action) => (
            <DropdownMenuItem
              key={action.label}
              onSelect={action.onSelect}
            >
              {action.label}
            </DropdownMenuItem>
          ))}
          <DropdownMenuSeparator />
          <DropdownMenuCheckboxItem
            checked={showArchived}
            onCheckedChange={setShowArchived}
          >
            Show archived
          </DropdownMenuCheckboxItem>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>Move to</DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuItem
                onSelect={() => setNotice("Moved to Personal.")}
              >
                Personal
              </DropdownMenuItem>
              <DropdownMenuItem onSelect={() => setNotice("Moved to Team.")}>
                Team
              </DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
        </DropdownMenuContent>
      </DropdownMenu>
      <p role="status">{notice}</p>
    </>
  );
}

Compose your own

These styled parts are included in the same install. Use children to build your layout; add className only when you want an override.

Scroll horizontally for long lines

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

Read the composition guide →

Props & types

Scroll horizontally for long lines

React.ComponentProps<typeof P.Root> & {
  trigger?: React.ReactNode;
  items?: {
    label: React.ReactNode;
    onSelect: () => void;
    disabled?: boolean;
  }[];
  className?: string;
}

Source

View 2 source files

registry/ui/dropdown-menu.tsx

Scroll horizontally for long lines

"use client";
import * as React from "react";
import { DropdownMenu as P } from "radix-ui";
import { Check, ChevronRight, Circle } from "lucide-react";
import { cn } from "./utils";
export function DropdownMenu({
  trigger,
  items,
  children,
  className,
  ...props
}: React.ComponentProps<typeof P.Root> & {
  trigger?: React.ReactNode;
  items?: {
    label: React.ReactNode;
    onSelect: () => void;
    disabled?: boolean;
  }[];
  className?: string;
}) {
  return (
    <P.Root {...props}>
      {trigger !== undefined ? (
        <>
          <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
          <DropdownMenuContent className={className}>
            {items?.map((i, n) => (
              <DropdownMenuItem
                key={n}
                disabled={i.disabled}
                onSelect={i.onSelect}
              >
                {i.label}
              </DropdownMenuItem>
            ))}
            {children}
          </DropdownMenuContent>
        </>
      ) : (
        children
      )}
    </P.Root>
  );
}
export const DropdownMenuTrigger = P.Trigger;
export const DropdownMenuPortal = P.Portal;
export const DropdownMenuGroup = P.Group;
export const DropdownMenuSub = P.Sub;
export const DropdownMenuRadioGroup = P.RadioGroup;
export function DropdownMenuContent({
  className,
  ...props
}: React.ComponentProps<typeof P.Content>) {
  return (
    <P.Portal>
      <P.Content
        sideOffset={6}
        collisionPadding={12}
        className={cn(
          "jez-popover z-50 min-w-48 max-h-[var(--radix-popper-available-height)] overflow-y-auto rounded-lg border border-border bg-background p-1 text-foreground shadow-lg",
          className,
        )}
        {...props}
      />
    </P.Portal>
  );
}
export function DropdownMenuItem({
  className,
  ...props
}: React.ComponentProps<typeof P.Item>) {
  return (
    <P.Item
      className={cn(
        "flex cursor-default items-center gap-2 rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-40 [&_svg]:size-4 [&_svg]:shrink-0",
        className,
      )}
      {...props}
    />
  );
}
export function DropdownMenuLabel({
  className,
  ...props
}: React.ComponentProps<typeof P.Label>) {
  return (
    <P.Label
      className={cn(
        "px-3 py-2 text-xs font-medium text-muted-foreground",
        className,
      )}
      {...props}
    />
  );
}
export function DropdownMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof P.Separator>) {
  return (
    <P.Separator className={cn("my-1 h-px bg-border", className)} {...props} />
  );
}
export function DropdownMenuCheckboxItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof P.CheckboxItem>) {
  return (
    <P.CheckboxItem
      className={cn(
        "relative flex items-center rounded-md py-2 pl-9 pr-3 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-40",
        className,
      )}
      {...props}
    >
      <P.ItemIndicator className="absolute left-3">
        <Check size={14} />
      </P.ItemIndicator>
      {children}
    </P.CheckboxItem>
  );
}
export function DropdownMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof P.RadioItem>) {
  return (
    <P.RadioItem
      className={cn(
        "relative flex items-center rounded-md py-2 pl-9 pr-3 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-40",
        className,
      )}
      {...props}
    >
      <P.ItemIndicator className="absolute left-3">
        <Circle size={8} fill="currentColor" />
      </P.ItemIndicator>
      {children}
    </P.RadioItem>
  );
}
export function DropdownMenuSubTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof P.SubTrigger>) {
  return (
    <P.SubTrigger
      className={cn(
        "flex items-center justify-between gap-4 rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRight size={14} />
    </P.SubTrigger>
  );
}
export function DropdownMenuSubContent({
  className,
  ...props
}: React.ComponentProps<typeof P.SubContent>) {
  return (
    <P.Portal>
      <P.SubContent
        className={cn(
          "z-50 min-w-44 rounded-lg border border-border bg-background p-1 text-foreground shadow-lg",
          className,
        )}
        {...props}
      />
    </P.Portal>
  );
}
export function DropdownMenuShortcut({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-wider text-muted-foreground",
        className,
      )}
      {...props}
    />
  );
}

registry/ui/utils.ts

Scroll horizontally for long lines

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
  return twMerge(clsx(values));
}

Dependencies

radix-ui@1.6.7 · lucide-react@0.577.0 · clsx@2.1.1 · tailwind-merge@3.5.0

Accessibility & behaviour

Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.

Read the accessibility and performance guide →