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.
"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 />;
}