Dropdown Menu

A Base UI menu with the Depth surface of the buttons, submenus and selection items.

Open the menu to try highlighted items, a submenu, checkbox and radio selections. The popup shares its rounded corners, subtle gradient and layered shadows with the Select.

Built on shadcn’s Base UI Dropdown Menu composition, with Notra styling. Base UI owns opening, dismissal, submenu timing, focus, keyboard navigation and selection; the wrappers add no custom interaction state or event handlers.

import {
  DownloadIcon,
  SettingsIcon,
  Trash2Icon,
  UsersIcon,
} from "lucide-react";
import { useState } from "react";

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

export default function DropdownMenuDemo() {
  const [showActivity, setShowActivity] = useState(true);
  const [view, setView] = useState("team");

  return (
    <div className="flex min-h-112 items-start justify-center gap-3 p-8">
      <DropdownMenu>
        <DropdownMenuTrigger render={<Button variant="outline" />}>
          Open menu
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-56">
          <DropdownMenuGroup>
            <DropdownMenuLabel>Workspace</DropdownMenuLabel>
            <DropdownMenuItem>
              <SettingsIcon aria-hidden="true" />
              Settings
              <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
              <UsersIcon aria-hidden="true" />
              Invite members
            </DropdownMenuItem>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>
                <DownloadIcon aria-hidden="true" />
                Export
              </DropdownMenuSubTrigger>
              <DropdownMenuSubContent>
                <DropdownMenuItem>Markdown</DropdownMenuItem>
                <DropdownMenuItem>CSV</DropdownMenuItem>
                <DropdownMenuItem disabled>PDF</DropdownMenuItem>
              </DropdownMenuSubContent>
            </DropdownMenuSub>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuCheckboxItem
            checked={showActivity}
            onCheckedChange={setShowActivity}
          >
            Show activity
          </DropdownMenuCheckboxItem>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuLabel>View</DropdownMenuLabel>
            <DropdownMenuRadioGroup onValueChange={setView} value={view}>
              <DropdownMenuRadioItem value="team">Team</DropdownMenuRadioItem>
              <DropdownMenuRadioItem value="personal">
                Personal
              </DropdownMenuRadioItem>
            </DropdownMenuRadioGroup>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuItem variant="destructive">
            <Trash2Icon aria-hidden="true" />
            Delete workspace
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <span className="text-muted-foreground py-1.5 text-sm">View: {view}</span>
    </div>
  );
}

Installation

$ bunx --bun shadcn@latest add @notra/notra-dropdown-menu

This replaces components/ui/dropdown-menu.tsx and installs the shared dropdown styles. Use a shadcn project on Base UI and Tailwind CSS v4. The example uses the Notra Button as its trigger.

Usage

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    Open menu
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>Workspace</DropdownMenuLabel>
      <DropdownMenuItem>Settings</DropdownMenuItem>
      <DropdownMenuItem>Invite members</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

Items and keyboard support

Place labels inside DropdownMenuGroup. Use DropdownMenuCheckboxItem for toggles, DropdownMenuRadioGroup and DropdownMenuRadioItem for a single selection, and DropdownMenuSub for nested actions. Set disabled on unavailable items and variant="destructive" on destructive actions.

The menu opens below its trigger by default and flips when it needs more room. Submenus open to the side. Arrow keys move between items, Escape closes the menu and returns focus to the trigger. Popup motion is disabled when reduced motion is enabled.