DropdownMenu

Installation

npm install @radix-ui/react-dropdown-menu@^2.1.16 @tabler/icons-react@^3.36.1 class-variance-authority@^0.7.1 clsx@^2.1.1 tailwind-merge@^3.4.0

components/overlay-layout/overlay-layout.ts
lib/icons.ts
lib/motion.ts
lib/utils.ts
components/dropdown-menu/dropdown-menu.tsx
components/dropdown-menu/index.ts

The code below also uses:

npm install @radix-ui/react-slot@^1.2.4

components/button-group/button-group-context.ts
components/spinner/index.ts
components/spinner/spinner.tsx
components/button/button.tsx
components/button/index.ts

Code

'use client';

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

export default function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Open menu</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="nx:w-56">
        <DropdownMenuLabel>My account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            Profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Billing
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Settings
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>Team</DropdownMenuItem>
          <DropdownMenuItem>Invite users</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          Log out
          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Props

DropdownMenu adds no props of its own; it accepts the props of the element or primitive it wraps.

DropdownMenuCheckboxItem adds no props of its own; it accepts the props of the element or primitive it wraps.

DropdownMenuContent adds no props of its own; it accepts the props of the element or primitive it wraps.

DropdownMenuGroup adds no props of its own; it accepts the props of the element or primitive it wraps.

DropdownMenuItem props
Prop	Type	Default	Description
`inset`	`boolean`	`false`	Indents the item to align with items that have a leading icon or checkbox.
`variant`	`"default" \| "destructive" \| null`	`"default"`	No description

DropdownMenuLabel props
Prop	Type	Default	Description
`inset`	`boolean`	`false`	Indents the label to align with items that have a leading icon or checkbox.

DropdownMenuPortal adds no props of its own; it accepts the props of the element or primitive it wraps.

DropdownMenuRadioGroup adds no props of its own; it accepts the props of the element or primitive it wraps.

DropdownMenuRadioItem adds no props of its own; it accepts the props of the element or primitive it wraps.

DropdownMenuSeparator adds no props of its own; it accepts the props of the element or primitive it wraps.

DropdownMenuShortcut adds no props of its own; it accepts the props of the element or primitive it wraps.

DropdownMenuSub adds no props of its own; it accepts the props of the element or primitive it wraps.

DropdownMenuSubContent adds no props of its own; it accepts the props of the element or primitive it wraps.

DropdownMenuSubTrigger props
Prop	Type	Default	Description
`inset`	`boolean`	`false`	Indents the trigger to align with items that have a leading icon or checkbox.

DropdownMenuTrigger adds no props of its own; it accepts the props of the element or primitive it wraps.

Examples

Checkbox items

'use client';

import { useState } from 'react';

import { Button } from '@/components/button/button';
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/dropdown-menu/dropdown-menu';

export default function DropdownMenuCheckboxItems() {
  const [showStatusBar, setShowStatusBar] = useState(true);
  const [showActivityBar, setShowActivityBar] = useState(false);
  const [showPanel, setShowPanel] = useState(false);

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">View</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="nx:w-56">
        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem
          checked={showStatusBar}
          onCheckedChange={setShowStatusBar}
        >
          Status bar
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem
          checked={showActivityBar}
          onCheckedChange={setShowActivityBar}
        >
          Activity bar
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem
          checked={showPanel}
          onCheckedChange={setShowPanel}
        >
          Panel
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Radio items

'use client';

import { useState } from 'react';

import { Button } from '@/components/button/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/dropdown-menu/dropdown-menu';

const POSITIONS = [
  { value: 'top', label: 'Top' },
  { value: 'bottom', label: 'Bottom' },
  { value: 'right', label: 'Right' },
];

export default function DropdownMenuRadioItems() {
  const [position, setPosition] = useState('bottom');
  const selected = POSITIONS.find((option) => option.value === position);

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Panel: {selected?.label}</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="nx:w-56">
        <DropdownMenuLabel>Panel position</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
          {POSITIONS.map(({ value, label }) => (
            <DropdownMenuRadioItem key={value} value={value}>
              {label}
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Submenu

'use client';

import { Button } from '@/components/button/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from '@/components/dropdown-menu/dropdown-menu';

export default function DropdownMenuSubmenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Share</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="nx:w-48">
        <DropdownMenuItem>Copy link</DropdownMenuItem>
        <DropdownMenuItem>Embed</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>Email</DropdownMenuItem>
            <DropdownMenuItem>Message</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>More…</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}