DropdownMenu

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download dropdown-menu -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import {
  DropdownMenuTrigger,
  DropdownMenu,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import * as React from "react";
export default function DropdownMenuExample() {
  const [open, setOpen] = React.useState(false);
  return (
    <DropdownMenuTrigger isOpen={open} onOpenChange={setOpen}>
      <Button variant="secondary">Open menu</Button>
      <DropdownMenu>
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
      </DropdownMenu>
    </DropdownMenuTrigger>
  );
}

Examples

Default

import {
  DropdownMenuTrigger,
  DropdownMenu,
  DropdownMenuLabel,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuShortcut,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
function Example({ label = "Actions" }: { label?: string }) {
  return (
    <DropdownMenuTrigger>
      <Button variant="tertiary" size="lg">
        Open
      </Button>
      <DropdownMenu>
        <DropdownMenuLabel>{label}</DropdownMenuLabel>
        <DropdownMenuGroup>
          <DropdownMenuItem>
            Profile <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Settings <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
      </DropdownMenu>
    </DropdownMenuTrigger>
  );
}
<Example />;

Checkboxes

import {
  DropdownMenuTrigger,
  DropdownMenu,
  DropdownMenuLabel,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuShortcut,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
function Example({ label = "Actions" }: { label?: string }) {
  return (
    <DropdownMenuTrigger>
      <Button variant="tertiary" size="lg">
        Open
      </Button>
      <DropdownMenu>
        <DropdownMenuLabel>{label}</DropdownMenuLabel>
        <DropdownMenuGroup>
          <DropdownMenuItem>
            Profile <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Settings <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
      </DropdownMenu>
    </DropdownMenuTrigger>
  );
}
<Example label="Preferences" />;

Radio

import {
  DropdownMenuTrigger,
  DropdownMenu,
  DropdownMenuLabel,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuShortcut,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
function Example({ label = "Actions" }: { label?: string }) {
  return (
    <DropdownMenuTrigger>
      <Button variant="tertiary" size="lg">
        Open
      </Button>
      <DropdownMenu>
        <DropdownMenuLabel>{label}</DropdownMenuLabel>
        <DropdownMenuGroup>
          <DropdownMenuItem>
            Profile <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Settings <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
      </DropdownMenu>
    </DropdownMenuTrigger>
  );
}
<Example label="Panel position" />;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

DropdownMenuItem

DropdownMenuLabel

DropdownMenuShortcut

DropdownMenuSubTrigger

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.