Dropdown Menu

A compound dropdown menu primitive built on Base UI Menu. Supports grouped sections with labels, nested submenus, checkbox items for multi-select, radio groups for single-choice, destructive items, keyboard shortcuts, and origin-aware open/close motion.

dropdown menu dropdown menu grouped nested submenu checkbox radio destructive shortcut overlay

Loading preview...

Examples

Practical examples and common states for the same installable component.

Grouped

Organizes related menu actions into labeled sections with separators.

examples/dropdown-menu-grouped.tsx

 1import {
 2  DropdownMenu,
 3  DropdownMenuContent,
 4  DropdownMenuGroup,
 5  DropdownMenuItem,
 6  DropdownMenuLabel,
 7  DropdownMenuSeparator,
 8  DropdownMenuShortcut,
 9  DropdownMenuTrigger,
10} from "@/components/wensity/dropdown-menu";
11import { IconClipboard, IconCopy, IconFileText, IconFolder } from "@tabler/icons-react";
12
13export function GroupedDropdown() {
14  return (
15    <DropdownMenu>
16      <DropdownMenuTrigger>Edit</DropdownMenuTrigger>
17      <DropdownMenuContent className="w-52">
18        <DropdownMenuLabel>Clipboard</DropdownMenuLabel>
19        <DropdownMenuGroup>
20          <DropdownMenuItem>
21            <IconCopy />
22            Copy
23            <DropdownMenuShortcut keys={["⌘", "C"]} />
24          </DropdownMenuItem>
25          <DropdownMenuItem>
26            <IconClipboard />
27            Paste
28            <DropdownMenuShortcut keys={["⌘", "V"]} />
29          </DropdownMenuItem>
30        </DropdownMenuGroup>
31        <DropdownMenuSeparator />
32        <DropdownMenuLabel>File</DropdownMenuLabel>
33        <DropdownMenuGroup>
34          <DropdownMenuItem>
35            <IconFileText />
36            New file
37          </DropdownMenuItem>
38          <DropdownMenuItem>
39            <IconFolder />
40            New folder
41          </DropdownMenuItem>
42        </DropdownMenuGroup>
43      </DropdownMenuContent>
44    </DropdownMenu>
45  );
46}

Nested

Displays additional actions through submenus with chevron indicators.

examples/dropdown-menu-nested.tsx

 1import {
 2  DropdownMenu,
 3  DropdownMenuContent,
 4  DropdownMenuItem,
 5  DropdownMenuSeparator,
 6  DropdownMenuSub,
 7  DropdownMenuSubContent,
 8  DropdownMenuSubTrigger,
 9  DropdownMenuTrigger,
10} from "@/components/wensity/dropdown-menu";
11import { IconCloudDownload, IconDownload, IconFileExport, IconLink, IconMail } from "@tabler/icons-react";
12
13export function NestedDropdown() {
14  return (
15    <DropdownMenu>
16      <DropdownMenuTrigger>Share</DropdownMenuTrigger>
17      <DropdownMenuContent className="w-48">
18        <DropdownMenuItem>
19          <IconLink />
20          Copy link
21        </DropdownMenuItem>
22        <DropdownMenuItem>
23          <IconMail />
24          Email
25        </DropdownMenuItem>
26        <DropdownMenuSeparator />
27        <DropdownMenuSub>
28          <DropdownMenuSubTrigger>
29            <IconDownload />
30            Export as
31          </DropdownMenuSubTrigger>
32          <DropdownMenuSubContent>
33            <DropdownMenuItem>
34              <IconFileExport />
35              PDF
36            </DropdownMenuItem>
37            <DropdownMenuItem>
38              <IconFileExport />
39              CSV
40            </DropdownMenuItem>
41            <DropdownMenuSeparator />
42            <DropdownMenuItem>
43              <IconCloudDownload />
44              Archive (.zip)
45            </DropdownMenuItem>
46          </DropdownMenuSubContent>
47        </DropdownMenuSub>
48      </DropdownMenuContent>
49    </DropdownMenu>
50  );
51}

Checkbox

Toggle multiple selectable options with check indicators.

examples/dropdown-menu-checkbox.tsx

 1"use client";
 2
 3import * as React from "react";
 4import {
 5  DropdownMenu,
 6  DropdownMenuCheckboxItem,
 7  DropdownMenuContent,
 8  DropdownMenuLabel,
 9  DropdownMenuSeparator,
10  DropdownMenuShortcut,
11  DropdownMenuTrigger,
12} from "@/components/wensity/dropdown-menu";
13import { IconSettings } from "@tabler/icons-react";
14
15export function CheckboxDropdown() {
16  const [showGrid, setShowGrid] = React.useState(true);
17  const [showRuler, setShowRuler] = React.useState(false);
18
19  return (
20    <DropdownMenu>
21      <DropdownMenuTrigger>
22        <IconSettings />
23        View
24      </DropdownMenuTrigger>
25      <DropdownMenuContent className="w-48">
26        <DropdownMenuLabel>Canvas</DropdownMenuLabel>
27        <DropdownMenuCheckboxItem
28          checked={showGrid}
29          onCheckedChange={setShowGrid}
30        >
31          Show grid
32          <DropdownMenuShortcut keys={["⌘", "'"]} />
33        </DropdownMenuCheckboxItem>
34        <DropdownMenuCheckboxItem
35          checked={showRuler}
36          onCheckedChange={setShowRuler}
37        >
38          Show ruler
39          <DropdownMenuShortcut keys={["⌘", "R"]} />
40        </DropdownMenuCheckboxItem>
41        <DropdownMenuSeparator />
42        <DropdownMenuCheckboxItem checked disabled>
43          Snap to grid
44        </DropdownMenuCheckboxItem>
45      </DropdownMenuContent>
46    </DropdownMenu>
47  );
48}

Radio

Select one option from a group with dot indicators.

examples/dropdown-menu-radio.tsx

 1"use client";
 2
 3import * as React from "react";
 4import {
 5  DropdownMenu,
 6  DropdownMenuContent,
 7  DropdownMenuLabel,
 8  DropdownMenuRadioGroup,
 9  DropdownMenuRadioItem,
10  DropdownMenuSeparator,
11  DropdownMenuTrigger,
12} from "@/components/wensity/dropdown-menu";
13import { IconSettings, IconWifi, IconWifiOff } from "@tabler/icons-react";
14
15export function RadioDropdown() {
16  const [density, setDensity] = React.useState("comfortable");
17
18  return (
19    <DropdownMenu>
20      <DropdownMenuTrigger>
21        <IconSettings />
22        Density
23      </DropdownMenuTrigger>
24      <DropdownMenuContent className="w-48">
25        <DropdownMenuLabel>Row height</DropdownMenuLabel>
26        <DropdownMenuRadioGroup value={density} onValueChange={setDensity}>
27          <DropdownMenuRadioItem value="compact">Compact</DropdownMenuRadioItem>
28          <DropdownMenuRadioItem value="comfortable">Comfortable</DropdownMenuRadioItem>
29          <DropdownMenuRadioItem value="spacious">Spacious</DropdownMenuRadioItem>
30        </DropdownMenuRadioGroup>
31        <DropdownMenuSeparator />
32        <DropdownMenuLabel>Status</DropdownMenuLabel>
33        <DropdownMenuRadioGroup value="online">
34          <DropdownMenuRadioItem value="online">
35            <IconWifi className="text-emerald-500" />
36            Online
37          </DropdownMenuRadioItem>
38          <DropdownMenuRadioItem value="offline" disabled>
39            <IconWifiOff />
40            Offline
41          </DropdownMenuRadioItem>
42        </DropdownMenuRadioGroup>
43      </DropdownMenuContent>
44    </DropdownMenu>
45  );
46}

Destructive

Highlights dangerous or irreversible actions with red styling.

examples/dropdown-menu-destructive.tsx

 1import {
 2  DropdownMenu,
 3  DropdownMenuContent,
 4  DropdownMenuItem,
 5  DropdownMenuLabel,
 6  DropdownMenuSeparator,
 7  DropdownMenuShortcut,
 8  DropdownMenuTrigger,
 9} from "@/components/wensity/dropdown-menu";
10import { IconArrowBigUp, IconCopy, IconPencil, IconTrash } from "@tabler/icons-react";
11
12export function DestructiveDropdown() {
13  return (
14    <DropdownMenu>
15      <DropdownMenuTrigger>More</DropdownMenuTrigger>
16      <DropdownMenuContent className="w-52">
17        <DropdownMenuLabel>Project</DropdownMenuLabel>
18        <DropdownMenuItem>
19          <IconPencil />
20          Rename
21        </DropdownMenuItem>
22        <DropdownMenuItem>
23          <IconCopy />
24          Duplicate
25          <DropdownMenuShortcut keys={["⌘", "D"]} />
26        </DropdownMenuItem>
27        <DropdownMenuSeparator />
28        <DropdownMenuLabel>Danger zone</DropdownMenuLabel>
29        <DropdownMenuItem destructive>
30          <IconArrowBigUp />
31          Archive
32        </DropdownMenuItem>
33        <DropdownMenuItem destructive>
34          <IconTrash />
35          Delete permanently
36          <DropdownMenuShortcut keys={["⌘", "⌫"]} />
37        </DropdownMenuItem>
38      </DropdownMenuContent>
39    </DropdownMenu>
40  );
41}