Overlays

Dropdown Menu

Floating menu attached to a button trigger.

Preview

'use client';

import { LogOut, Settings, User } from 'lucide-react';
import { Button } from '@brika/clay/components/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@brika/clay/components/dropdown-menu';
/** Action menu with icons, grouped items, a separator, and a destructive item. */
export default function DropdownMenuDefaultDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Account</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-48">
        <DropdownMenuLabel>My account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            <User />
            Profile
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Settings />
            Settings
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <LogOut />
          Log out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

01 Installation

Install

Pull Dropdown Menu from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { DropdownMenu } from "@brika/clay";

tsxGranular1 line

import { DropdownMenu } from "@brika/clay/components/dropdown-menu";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxDropdown Menu.tsx42 lines

'use client';

import { LogOut, Settings, User } from 'lucide-react';
import { Button } from '@brika/clay/components/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@brika/clay/components/dropdown-menu';
/** Action menu with icons, grouped items, a separator, and a destructive item. */
export default function DropdownMenuDefaultDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Account</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-48">
        <DropdownMenuLabel>My account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            <User />
            Profile
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Settings />
            Settings
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <LogOut />
          Log out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

03 Examples

Dropdown Menu, every way

Checkbox

DropdownMenuCheckboxItem toggles boolean view preferences and persists checked state.

GitHub

'use client';

import { useState } from 'react';
import { Button } from '@brika/clay/components/button';
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@brika/clay/components/dropdown-menu';
/** DropdownMenuCheckboxItem toggles boolean view preferences and persists checked state. */
export default function DropdownMenuCheckboxDemo() {
  const [statusBar, setStatusBar] = useState(true);
  const [activityBar, setActivityBar] = useState(false);
  const [panel, setPanel] = useState(false);

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">View</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-52">
        <DropdownMenuLabel>Toggle panels</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem checked={statusBar} onCheckedChange={setStatusBar}>
          Status bar
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={activityBar} onCheckedChange={setActivityBar}>
          Activity bar
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={panel} onCheckedChange={setPanel}>
          Bottom panel
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Radio

DropdownMenuRadioGroup enforces a single active selection across a set of items.

GitHub

'use client';

import { useState } from 'react';
import { Button } from '@brika/clay/components/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@brika/clay/components/dropdown-menu';
/** DropdownMenuRadioGroup enforces a single active selection across a set of items. */
export default function DropdownMenuRadioDemo() {
  const [position, setPosition] = useState('bottom');

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Panel position</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-48">
        <DropdownMenuLabel>Position</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Shortcuts

DropdownMenuShortcut renders right-aligned keyboard hints, purely visual, not functional.

GitHub

'use client';

import { Button } from '@brika/clay/components/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from '@brika/clay/components/dropdown-menu';
/** DropdownMenuShortcut renders right-aligned keyboard hints, purely visual, not functional. */
export default function DropdownMenuShortcutsDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Edit</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-48">
        <DropdownMenuItem>
          Undo
          <DropdownMenuShortcut>Cmd+Z</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Redo
          <DropdownMenuShortcut>Cmd+Shift+Z</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          Cut
          <DropdownMenuShortcut>Cmd+X</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Copy
          <DropdownMenuShortcut>Cmd+C</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Paste
          <DropdownMenuShortcut>Cmd+V</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

04 Accessibility

Accessibility

Arrow keys navigate items; Enter/Space activate; Escape closes and returns focus to the trigger.
Checkbox items carry aria-checked; radio items carry aria-checked within a role="group".
DropdownMenuShortcut renders keyboard hints, these are visual only and not announced by AT.
Destructive items should use variant="destructive" to make intent clear visually and in context.

05 API reference

API reference

Props specific to Dropdown Menu. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

<DropdownMenu />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<DropdownMenuCheckboxItem />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<DropdownMenuContent />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<DropdownMenuGroup />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<DropdownMenuItem />

2 props

inset
boolean
Extra leading padding to align with items that have icons.
variantdefault 'default'
'default' | 'destructive'
"default" or "destructive" treatment.

<DropdownMenuLabel />

1 prop

inset
boolean
Extra leading padding to align with items that have icons.

<DropdownMenuPortal />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<DropdownMenuRadioGroup />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<DropdownMenuRadioItem />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<DropdownMenuSeparator />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<DropdownMenuShortcut />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<DropdownMenuSub />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<DropdownMenuSubContent />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<DropdownMenuSubTrigger />

1 prop

inset
boolean
Extra leading padding to align with items that have icons.

<DropdownMenuTrigger />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.