Dropdown Menu

Component 1

About

A dropdown menu with grouped items, nested submenus, checkbox and radio items and shortcut labels. Accessible, built on Base UI for user menus and row actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dropdown Menu to your project and fits it to your theme.

Code

How Dropdown Menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { IconBell, IconSettings, IconUserPlus, IconUsers } from "@tabler/icons-react";
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

const primitivePreviewCardSurfaceFrameClass = cn(
  "relative isolate overflow-hidden rounded-2xl",
  "border",
);

const primitivePreviewCardSurfaceLightClass = cn(
  "border-black/[0.08] bg-[#f4f4f5]",
  "[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);

const primitivePreviewCardSurfaceClass = cn(
  primitivePreviewCardSurfaceFrameClass,
  primitivePreviewCardSurfaceLightClass,
  // Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
  // PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
  "dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);

/* ─── Trigger shell ─────────────────────────────────────────── */

const triggerClass = cn(
  "inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium outline-none",
  "border-[color-mix(in_srgb,var(--foreground)_12%,transparent)]",
  "bg-[var(--background)] text-[var(--foreground)]",
  "transition-[border-color,background-color] duration-150",
  "hover:border-[color-mix(in_srgb,var(--foreground)_22%,transparent)]",
  "focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--foreground)_18%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]",
  "data-popup-open:border-[color-mix(in_srgb,var(--foreground)_26%,transparent)]",
);

/* ─── Panel wrapper ─────────────────────────────────────────── */

function Panel({
  label,
  children,
}: {
  label: string;
  children: React.ReactNode;
}) {
  return (
    <div
      className={cn(
        primitivePreviewCardSurfaceClass,
        "flex min-h-[440px] w-full max-w-md flex-col items-center justify-start gap-3 p-6 pt-10",
      )}
    >
      <p className="text-[11px] font-medium tracking-[0.02em] text-[var(--muted-foreground)]">
        {label}
      </p>
      {children}
    </div>
  );
}

/* ─── Default (Grouped) ─────────────────────────────────────── */

export function DropdownMenuPreview() {
  return (
    <Panel label="Grouped sections with labels">
      <DropdownMenu defaultOpen>
        <DropdownMenuTrigger className={triggerClass}>
          <IconSettings size={15} stroke={1.75} />
          Settings
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start" sideOffset={6}>
          <DropdownMenuLabel>Account</DropdownMenuLabel>
          <DropdownMenuGroup>
            <DropdownMenuItem>
              <IconUserPlus size={15} stroke={1.75} />
              Invite teammates
              <DropdownMenuShortcut keys={["⌘", "I"]} />
            </DropdownMenuItem>
            <DropdownMenuItem>
              <IconUsers size={15} stroke={1.75} />
              Manage members
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuLabel>Workspace</DropdownMenuLabel>
          <DropdownMenuGroup>
            <DropdownMenuItem>
              <IconSettings size={15} stroke={1.75} />
              Preferences
              <DropdownMenuShortcut keys={["⌘", ","]} />
            </DropdownMenuItem>
            <DropdownMenuItem>
              <IconBell size={15} stroke={1.75} />
              Notifications
            </DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </Panel>
  );
}

/* ─── Grouped ───────────────────────────────────────────────── */

/* ─── Nested ────────────────────────────────────────────────── */

/* ─── Checkbox ──────────────────────────────────────────────── */

/* ─── Radio ─────────────────────────────────────────────────── */

/* ─── Destructive ───────────────────────────────────────────── */

/* ─── Combined (all variants in one row) ───────────────────── */

export default function Demo() {
  return <DropdownMenuPreview />;
}