Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Kobalte

The Dropdown Menu component is built on top of Kobalte Dropdown Menu, which provides accessible menu, keyboard, and focus behavior.

1
import { Button } from "~/components/ui/button";
2
import {
3
  DropdownMenu,
4
  DropdownMenuContent,
5
  DropdownMenuGroup,
6
  DropdownMenuItem,
7
  DropdownMenuLabel,
8
  DropdownMenuPortal,
9
  DropdownMenuSeparator,
10
  DropdownMenuShortcut,
11
  DropdownMenuSub,
12
  DropdownMenuSubContent,
13
  DropdownMenuSubTrigger,
14
  DropdownMenuTrigger,
15
} from "~/components/ui/dropdown-menu";
16

17
export default function DropdownMenuDemo() {
18
  return (
19
    <DropdownMenu>
20
      <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
21
        Open
22
      </DropdownMenuTrigger>
23
      <DropdownMenuContent class="w-40">
24
        <DropdownMenuGroup>
25
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
26
          <DropdownMenuItem>
27
            Profile<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
28
          </DropdownMenuItem>
29
          <DropdownMenuItem>
30
            Billing<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
31
          </DropdownMenuItem>
32
          <DropdownMenuItem>
33
            Settings<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
34
          </DropdownMenuItem>
35
        </DropdownMenuGroup>
36
        <DropdownMenuSeparator />
37
        <DropdownMenuGroup>
38
          <DropdownMenuItem>Team</DropdownMenuItem>
39
          <DropdownMenuSub>
40
            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
41
            <DropdownMenuPortal>
42
              <DropdownMenuSubContent>
43
                <DropdownMenuItem>Email</DropdownMenuItem>
44
                <DropdownMenuItem>Message</DropdownMenuItem>
45
                <DropdownMenuSeparator />
46
                <DropdownMenuItem>More...</DropdownMenuItem>
47
              </DropdownMenuSubContent>
48
            </DropdownMenuPortal>
49
          </DropdownMenuSub>
50
          <DropdownMenuItem>
51
            New Team<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
52
          </DropdownMenuItem>
53
        </DropdownMenuGroup>
54
        <DropdownMenuSeparator />
55
        <DropdownMenuGroup>
56
          <DropdownMenuItem>GitHub</DropdownMenuItem>
57
          <DropdownMenuItem>Support</DropdownMenuItem>
58
          <DropdownMenuItem disabled>API</DropdownMenuItem>
59
        </DropdownMenuGroup>
60
        <DropdownMenuSeparator />
61
        <DropdownMenuGroup>
62
          <DropdownMenuItem>
63
            Log out<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
64
          </DropdownMenuItem>
65
        </DropdownMenuGroup>
66
      </DropdownMenuContent>
67
    </DropdownMenu>
68
  );
69
}

Installation

pnpm dlx shadcn@latest add @zaidan/dropdown-menu
npx shadcn@latest add @zaidan/dropdown-menu
yarn dlx shadcn@latest add @zaidan/dropdown-menu
bunx --bun shadcn@latest add @zaidan/dropdown-menu

Usage

1
import { Button } from "~/components/ui/button";
2
import {
3
  DropdownMenu,
4
  DropdownMenuContent,
5
  DropdownMenuGroup,
6
  DropdownMenuItem,
7
  DropdownMenuLabel,
8
  DropdownMenuSeparator,
9
  DropdownMenuTrigger,
10
} from "~/components/ui/dropdown-menu";

1
<DropdownMenu>
2
  <DropdownMenuTrigger as={Button} variant="outline">
3
    Open
4
  </DropdownMenuTrigger>
5
  <DropdownMenuContent>
6
    <DropdownMenuGroup>
7
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
8
      <DropdownMenuItem>Profile</DropdownMenuItem>
9
      <DropdownMenuItem>Billing</DropdownMenuItem>
10
    </DropdownMenuGroup>
11
    <DropdownMenuSeparator />
12
    <DropdownMenuGroup>
13
      <DropdownMenuItem>Team</DropdownMenuItem>
14
      <DropdownMenuItem>Subscription</DropdownMenuItem>
15
    </DropdownMenuGroup>
16
  </DropdownMenuContent>
17
</DropdownMenu>

See the Kobalte Dropdown Menu documentation for primitive-level options, accessibility, and keyboard behavior.

Composition

Use the following composition to build a DropdownMenu:

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuItem
    │   └── DropdownMenuItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuCheckboxItem
    │   └── DropdownMenuCheckboxItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   └── DropdownMenuRadioGroup
    │       ├── DropdownMenuRadioItem
    │       └── DropdownMenuRadioItem
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent
            └── DropdownMenuGroup
                ├── DropdownMenuLabel
                ├── DropdownMenuItem
                └── DropdownMenuItem

Basic

A basic dropdown menu with labels and separators.

1
import { Button } from "~/components/ui/button";
2
import {
3
  DropdownMenu,
4
  DropdownMenuContent,
5
  DropdownMenuGroup,
6
  DropdownMenuItem,
7
  DropdownMenuLabel,
8
  DropdownMenuSeparator,
9
  DropdownMenuTrigger,
10
} from "~/components/ui/dropdown-menu";
11

12
export default function DropdownMenuBasic() {
13
  return (
14
    <DropdownMenu>
15
      <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
16
        Open
17
      </DropdownMenuTrigger>
18
      <DropdownMenuContent>
19
        <DropdownMenuGroup>
20
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
21
          <DropdownMenuItem>Profile</DropdownMenuItem>
22
          <DropdownMenuItem>Billing</DropdownMenuItem>
23
          <DropdownMenuItem>Settings</DropdownMenuItem>
24
        </DropdownMenuGroup>
25
        <DropdownMenuSeparator />
26
        <DropdownMenuItem>GitHub</DropdownMenuItem>
27
        <DropdownMenuItem>Support</DropdownMenuItem>
28
        <DropdownMenuItem disabled>API</DropdownMenuItem>
29
      </DropdownMenuContent>
30
    </DropdownMenu>
31
  );
32
}

Submenu

Use DropdownMenuSub to nest secondary actions.

1
import { Button } from "~/components/ui/button";
2
import {
3
  DropdownMenu,
4
  DropdownMenuContent,
5
  DropdownMenuGroup,
6
  DropdownMenuItem,
7
  DropdownMenuPortal,
8
  DropdownMenuSeparator,
9
  DropdownMenuShortcut,
10
  DropdownMenuSub,
11
  DropdownMenuSubContent,
12
  DropdownMenuSubTrigger,
13
  DropdownMenuTrigger,
14
} from "~/components/ui/dropdown-menu";
15

16
export default function DropdownMenuSubmenu() {
17
  return (
18
    <DropdownMenu>
19
      <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
20
        Open
21
      </DropdownMenuTrigger>
22
      <DropdownMenuContent>
23
        <DropdownMenuGroup>
24
          <DropdownMenuItem>Team</DropdownMenuItem>
25
          <DropdownMenuSub>
26
            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
27
            <DropdownMenuPortal>
28
              <DropdownMenuSubContent>
29
                <DropdownMenuItem>Email</DropdownMenuItem>
30
                <DropdownMenuItem>Message</DropdownMenuItem>
31
                <DropdownMenuSub>
32
                  <DropdownMenuSubTrigger>More options</DropdownMenuSubTrigger>
33
                  <DropdownMenuPortal>
34
                    <DropdownMenuSubContent>
35
                      <DropdownMenuItem>Calendly</DropdownMenuItem>
36
                      <DropdownMenuItem>Slack</DropdownMenuItem>
37
                      <DropdownMenuSeparator />
38
                      <DropdownMenuItem>Webhook</DropdownMenuItem>
39
                    </DropdownMenuSubContent>
40
                  </DropdownMenuPortal>
41
                </DropdownMenuSub>
42
                <DropdownMenuSeparator />
43
                <DropdownMenuItem>Advanced...</DropdownMenuItem>
44
              </DropdownMenuSubContent>
45
            </DropdownMenuPortal>
46
          </DropdownMenuSub>
47
          <DropdownMenuItem>
48
            New Team<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
49
          </DropdownMenuItem>
50
        </DropdownMenuGroup>
51
      </DropdownMenuContent>
52
    </DropdownMenu>
53
  );
54
}

Shortcuts

Add DropdownMenuShortcut to show keyboard hints.

1
import { Button } from "~/components/ui/button";
2
import {
3
  DropdownMenu,
4
  DropdownMenuContent,
5
  DropdownMenuGroup,
6
  DropdownMenuItem,
7
  DropdownMenuLabel,
8
  DropdownMenuSeparator,
9
  DropdownMenuShortcut,
10
  DropdownMenuTrigger,
11
} from "~/components/ui/dropdown-menu";
12

13
export default function DropdownMenuShortcuts() {
14
  return (
15
    <DropdownMenu>
16
      <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
17
        Open
18
      </DropdownMenuTrigger>
19
      <DropdownMenuContent>
20
        <DropdownMenuGroup>
21
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
22
          <DropdownMenuItem>
23
            Profile<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
24
          </DropdownMenuItem>
25
          <DropdownMenuItem>
26
            Billing<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
27
          </DropdownMenuItem>
28
          <DropdownMenuItem>
29
            Settings<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
30
          </DropdownMenuItem>
31
        </DropdownMenuGroup>
32
        <DropdownMenuSeparator />
33
        <DropdownMenuItem>
34
          Log out<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
35
        </DropdownMenuItem>
36
      </DropdownMenuContent>
37
    </DropdownMenu>
38
  );
39
}

Icons

Combine icons with labels for quick scanning.

1
import { CreditCardIcon, LogOutIcon, SettingsIcon, UserIcon } from "lucide-solid";
2
import { Button } from "~/components/ui/button";
3
import {
4
  DropdownMenu,
5
  DropdownMenuContent,
6
  DropdownMenuItem,
7
  DropdownMenuSeparator,
8
  DropdownMenuTrigger,
9
} from "~/components/ui/dropdown-menu";
10

11
export default function DropdownMenuIcons() {
12
  return (
13
    <DropdownMenu>
14
      <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
15
        Open
16
      </DropdownMenuTrigger>
17
      <DropdownMenuContent>
18
        <DropdownMenuItem>
19
          <UserIcon />
20
          Profile
21
        </DropdownMenuItem>
22
        <DropdownMenuItem>
23
          <CreditCardIcon />
24
          Billing
25
        </DropdownMenuItem>
26
        <DropdownMenuItem>
27
          <SettingsIcon />
28
          Settings
29
        </DropdownMenuItem>
30
        <DropdownMenuSeparator />
31
        <DropdownMenuItem variant="destructive">
32
          <LogOutIcon />
33
          Log out
34
        </DropdownMenuItem>
35
      </DropdownMenuContent>
36
    </DropdownMenu>
37
  );
38
}

Checkboxes

Use DropdownMenuCheckboxItem for toggles.

1
import { createSignal } from "solid-js";
2
import { Button } from "~/components/ui/button";
3
import {
4
  DropdownMenu,
5
  DropdownMenuCheckboxItem,
6
  DropdownMenuContent,
7
  DropdownMenuGroup,
8
  DropdownMenuLabel,
9
  DropdownMenuTrigger,
10
} from "~/components/ui/dropdown-menu";
11

12
export default function DropdownMenuCheckboxes() {
13
  const [showStatusBar, setShowStatusBar] = createSignal(true);
14
  const [showActivityBar, setShowActivityBar] = createSignal(false);
15
  const [showPanel, setShowPanel] = createSignal(false);
16
  return (
17
    <DropdownMenu>
18
      <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
19
        Open
20
      </DropdownMenuTrigger>
21
      <DropdownMenuContent class="w-40">
22
        <DropdownMenuGroup>
23
          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
24
          <DropdownMenuCheckboxItem checked={showStatusBar()} onChange={setShowStatusBar}>
25
            Status Bar
26
          </DropdownMenuCheckboxItem>
27
          <DropdownMenuCheckboxItem
28
            checked={showActivityBar()}
29
            onChange={setShowActivityBar}
30
            disabled
31
          >
32
            Activity Bar
33
          </DropdownMenuCheckboxItem>
34
          <DropdownMenuCheckboxItem checked={showPanel()} onChange={setShowPanel}>
35
            Panel
36
          </DropdownMenuCheckboxItem>
37
        </DropdownMenuGroup>
38
      </DropdownMenuContent>
39
    </DropdownMenu>
40
  );
41
}

Checkboxes Icons

Add icons to checkbox items.

1
import { BellIcon, MailIcon, MessageSquareIcon } from "lucide-solid";
2
import { createSignal } from "solid-js";
3
import { Button } from "~/components/ui/button";
4
import {
5
  DropdownMenu,
6
  DropdownMenuCheckboxItem,
7
  DropdownMenuContent,
8
  DropdownMenuGroup,
9
  DropdownMenuLabel,
10
  DropdownMenuTrigger,
11
} from "~/components/ui/dropdown-menu";
12

13
export default function DropdownMenuCheckboxesIcons() {
14
  const [notifications, setNotifications] = createSignal({ email: true, sms: false, push: true });
15
  return (
16
    <DropdownMenu>
17
      <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
18
        Notifications
19
      </DropdownMenuTrigger>
20
      <DropdownMenuContent class="w-48">
21
        <DropdownMenuGroup>
22
          <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>
23
          <DropdownMenuCheckboxItem
24
            checked={notifications().email}
25
            onChange={(checked) =>
26
              setNotifications({ ...notifications(), email: checked === true })
27
            }
28
          >
29
            <MailIcon />
30
            Email notifications
31
          </DropdownMenuCheckboxItem>
32
          <DropdownMenuCheckboxItem
33
            checked={notifications().sms}
34
            onChange={(checked) => setNotifications({ ...notifications(), sms: checked === true })}
35
          >
36
            <MessageSquareIcon />
37
            SMS notifications
38
          </DropdownMenuCheckboxItem>
39
          <DropdownMenuCheckboxItem
40
            checked={notifications().push}
41
            onChange={(checked) => setNotifications({ ...notifications(), push: checked === true })}
42
          >
43
            <BellIcon />
44
            Push notifications
45
          </DropdownMenuCheckboxItem>
46
        </DropdownMenuGroup>
47
      </DropdownMenuContent>
48
    </DropdownMenu>
49
  );
50
}

Radio Group

Use DropdownMenuRadioGroup for exclusive choices.

1
import { createSignal } from "solid-js";
2
import { Button } from "~/components/ui/button";
3
import {
4
  DropdownMenu,
5
  DropdownMenuContent,
6
  DropdownMenuGroup,
7
  DropdownMenuLabel,
8
  DropdownMenuRadioGroup,
9
  DropdownMenuRadioItem,
10
  DropdownMenuTrigger,
11
} from "~/components/ui/dropdown-menu";
12

13
export default function DropdownMenuRadioGroupDemo() {
14
  const [position, setPosition] = createSignal("bottom");
15
  return (
16
    <DropdownMenu>
17
      <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
18
        Open
19
      </DropdownMenuTrigger>
20
      <DropdownMenuContent class="w-32">
21
        <DropdownMenuGroup>
22
          <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
23
          <DropdownMenuRadioGroup value={position()} onChange={setPosition}>
24
            <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
25
            <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
26
            <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
27
          </DropdownMenuRadioGroup>
28
        </DropdownMenuGroup>
29
      </DropdownMenuContent>
30
    </DropdownMenu>
31
  );
32
}

Radio Icons

Show radio options with icons.

1
import { Building2Icon, CreditCardIcon, WalletIcon } from "lucide-solid";
2
import { createSignal } from "solid-js";
3
import { Button } from "~/components/ui/button";
4
import {
5
  DropdownMenu,
6
  DropdownMenuContent,
7
  DropdownMenuGroup,
8
  DropdownMenuLabel,
9
  DropdownMenuRadioGroup,
10
  DropdownMenuRadioItem,
11
  DropdownMenuTrigger,
12
} from "~/components/ui/dropdown-menu";
13

14
export default function DropdownMenuRadioIcons() {
15
  const [paymentMethod, setPaymentMethod] = createSignal("card");
16
  return (
17
    <DropdownMenu>
18
      <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
19
        Payment Method
20
      </DropdownMenuTrigger>
21
      <DropdownMenuContent class="min-w-56">
22
        <DropdownMenuGroup>
23
          <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>
24
          <DropdownMenuRadioGroup value={paymentMethod()} onChange={setPaymentMethod}>
25
            <DropdownMenuRadioItem value="card">
26
              <CreditCardIcon />
27
              Credit Card
28
            </DropdownMenuRadioItem>
29
            <DropdownMenuRadioItem value="paypal">
30
              <WalletIcon />
31
              PayPal
32
            </DropdownMenuRadioItem>
33
            <DropdownMenuRadioItem value="bank">
34
              <Building2Icon />
35
              Bank Transfer
36
            </DropdownMenuRadioItem>
37
          </DropdownMenuRadioGroup>
38
        </DropdownMenuGroup>
39
      </DropdownMenuContent>
40
    </DropdownMenu>
41
  );
42
}

Destructive

Use variant="destructive" for irreversible actions.

1
import { PencilIcon, ShareIcon, TrashIcon } from "lucide-solid";
2
import { Button } from "~/components/ui/button";
3
import {
4
  DropdownMenu,
5
  DropdownMenuContent,
6
  DropdownMenuGroup,
7
  DropdownMenuItem,
8
  DropdownMenuSeparator,
9
  DropdownMenuTrigger,
10
} from "~/components/ui/dropdown-menu";
11

12
export default function DropdownMenuDestructive() {
13
  return (
14
    <DropdownMenu>
15
      <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
16
        Actions
17
      </DropdownMenuTrigger>
18
      <DropdownMenuContent>
19
        <DropdownMenuGroup>
20
          <DropdownMenuItem>
21
            <PencilIcon />
22
            Edit
23
          </DropdownMenuItem>
24
          <DropdownMenuItem>
25
            <ShareIcon />
26
            Share
27
          </DropdownMenuItem>
28
        </DropdownMenuGroup>
29
        <DropdownMenuSeparator />
30
        <DropdownMenuGroup>
31
          <DropdownMenuItem variant="destructive">
32
            <TrashIcon />
33
            Delete
34
          </DropdownMenuItem>
35
        </DropdownMenuGroup>
36
      </DropdownMenuContent>
37
    </DropdownMenu>
38
  );
39
}

Avatar

An account switcher dropdown triggered by an avatar.

1
import { BadgeCheckIcon, BellIcon, CreditCardIcon, LogOutIcon } from "lucide-solid";
2
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
3
import { Button } from "~/components/ui/button";
4
import {
5
  DropdownMenu,
6
  DropdownMenuContent,
7
  DropdownMenuGroup,
8
  DropdownMenuItem,
9
  DropdownMenuSeparator,
10
  DropdownMenuTrigger,
11
} from "~/components/ui/dropdown-menu";
12

13
export default function DropdownMenuAvatar() {
14
  return (
15
    <DropdownMenu placement="bottom-end">
16
      <DropdownMenuTrigger as={Button} variant="ghost" size="icon" class="rounded-full">
17
        <Avatar>
18
          <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
19
          <AvatarFallback>LR</AvatarFallback>
20
        </Avatar>
21
      </DropdownMenuTrigger>
22
      <DropdownMenuContent>
23
        <DropdownMenuGroup>
24
          <DropdownMenuItem>
25
            <BadgeCheckIcon />
26
            Account
27
          </DropdownMenuItem>
28
          <DropdownMenuItem>
29
            <CreditCardIcon />
30
            Billing
31
          </DropdownMenuItem>
32
          <DropdownMenuItem>
33
            <BellIcon />
34
            Notifications
35
          </DropdownMenuItem>
36
        </DropdownMenuGroup>
37
        <DropdownMenuSeparator />
38
        <DropdownMenuItem>
39
          <LogOutIcon />
40
          Sign Out
41
        </DropdownMenuItem>
42
      </DropdownMenuContent>
43
    </DropdownMenu>
44
  );
45
}

Complex

A richer example combining groups, icons, and submenus.

1
import {
2
  BellIcon,
3
  CreditCardIcon,
4
  DownloadIcon,
5
  EyeIcon,
6
  FileCodeIcon,
7
  FileIcon,
8
  FileTextIcon,
9
  FolderIcon,
10
  FolderOpenIcon,
11
  FolderSearchIcon,
12
  HelpCircleIcon,
13
  KeyboardIcon,
14
  LanguagesIcon,
15
  LayoutIcon,
16
  LogOutIcon,
17
  MailIcon,
18
  MonitorIcon,
19
  MoonIcon,
20
  MoreHorizontalIcon,
21
  PaletteIcon,
22
  SaveIcon,
23
  SettingsIcon,
24
  ShieldIcon,
25
  SunIcon,
26
  UserIcon,
27
} from "lucide-solid";
28
import { createSignal } from "solid-js";
29
import { Button } from "~/components/ui/button";
30
import {
31
  DropdownMenu,
32
  DropdownMenuCheckboxItem,
33
  DropdownMenuContent,
34
  DropdownMenuGroup,
35
  DropdownMenuItem,
36
  DropdownMenuLabel,
37
  DropdownMenuPortal,
38
  DropdownMenuRadioGroup,
39
  DropdownMenuRadioItem,
40
  DropdownMenuSeparator,
41
  DropdownMenuShortcut,
42
  DropdownMenuSub,
43
  DropdownMenuSubContent,
44
  DropdownMenuSubTrigger,
45
  DropdownMenuTrigger,
46
} from "~/components/ui/dropdown-menu";
47

48
export default function DropdownMenuComplex() {
49
  const [notifications, setNotifications] = createSignal({ email: true, sms: false, push: true });
50
  const [theme, setTheme] = createSignal("light");
51

52
  return (
53
    <DropdownMenu>
54
      <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
55
        Complex Menu
56
      </DropdownMenuTrigger>
57
      <DropdownMenuContent class="w-44">
58
        <DropdownMenuGroup>
59
          <DropdownMenuLabel>File</DropdownMenuLabel>
60
          <DropdownMenuItem>
61
            <FileIcon />
62
            New File<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
63
          </DropdownMenuItem>
64
          <DropdownMenuItem>
65
            <FolderIcon />
66
            New Folder<DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
67
          </DropdownMenuItem>
68
          <DropdownMenuSub>
69
            <DropdownMenuSubTrigger>
70
              <FolderOpenIcon />
71
              Open Recent
72
            </DropdownMenuSubTrigger>
73
            <DropdownMenuPortal>
74
              <DropdownMenuSubContent>
75
                <DropdownMenuGroup>
76
                  <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
77
                  <DropdownMenuItem>
78
                    <FileCodeIcon />
79
                    Project Alpha
80
                  </DropdownMenuItem>
81
                  <DropdownMenuItem>
82
                    <FileCodeIcon />
83
                    Project Beta
84
                  </DropdownMenuItem>
85
                  <DropdownMenuSub>
86
                    <DropdownMenuSubTrigger>
87
                      <MoreHorizontalIcon />
88
                      More Projects
89
                    </DropdownMenuSubTrigger>
90
                    <DropdownMenuPortal>
91
                      <DropdownMenuSubContent>
92
                        <DropdownMenuItem>
93
                          <FileCodeIcon />
94
                          Project Gamma
95
                        </DropdownMenuItem>
96
                        <DropdownMenuItem>
97
                          <FileCodeIcon />
98
                          Project Delta
99
                        </DropdownMenuItem>
100
                      </DropdownMenuSubContent>
101
                    </DropdownMenuPortal>
102
                  </DropdownMenuSub>
103
                </DropdownMenuGroup>
104
                <DropdownMenuSeparator />
105
                <DropdownMenuGroup>
106
                  <DropdownMenuItem>
107
                    <FolderSearchIcon />
108
                    Browse...
109
                  </DropdownMenuItem>
110
                </DropdownMenuGroup>
111
              </DropdownMenuSubContent>
112
            </DropdownMenuPortal>
113
          </DropdownMenuSub>
114
          <DropdownMenuSeparator />
115
          <DropdownMenuItem>
116
            <SaveIcon />
117
            Save<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
118
          </DropdownMenuItem>
119
          <DropdownMenuItem>
120
            <DownloadIcon />
121
            Export<DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
122
          </DropdownMenuItem>
123
        </DropdownMenuGroup>
124
        <DropdownMenuSeparator />
125
        <DropdownMenuGroup>
126
          <DropdownMenuLabel>View</DropdownMenuLabel>
127
          <DropdownMenuCheckboxItem
128
            checked={notifications().email}
129
            onChange={(checked) =>
130
              setNotifications({ ...notifications(), email: checked === true })
131
            }
132
          >
133
            <EyeIcon />
134
            Show Sidebar
135
          </DropdownMenuCheckboxItem>
136
          <DropdownMenuCheckboxItem
137
            checked={notifications().sms}
138
            onChange={(checked) => setNotifications({ ...notifications(), sms: checked === true })}
139
          >
140
            <LayoutIcon />
141
            Show Status Bar
142
          </DropdownMenuCheckboxItem>
143
          <DropdownMenuSub>
144
            <DropdownMenuSubTrigger>
145
              <PaletteIcon />
146
              Theme
147
            </DropdownMenuSubTrigger>
148
            <DropdownMenuPortal>
149
              <DropdownMenuSubContent>
150
                <DropdownMenuGroup>
151
                  <DropdownMenuLabel>Appearance</DropdownMenuLabel>
152
                  <DropdownMenuRadioGroup value={theme()} onChange={setTheme}>
153
                    <DropdownMenuRadioItem value="light">
154
                      <SunIcon />
155
                      Light
156
                    </DropdownMenuRadioItem>
157
                    <DropdownMenuRadioItem value="dark">
158
                      <MoonIcon />
159
                      Dark
160
                    </DropdownMenuRadioItem>
161
                    <DropdownMenuRadioItem value="system">
162
                      <MonitorIcon />
163
                      System
164
                    </DropdownMenuRadioItem>
165
                  </DropdownMenuRadioGroup>
166
                </DropdownMenuGroup>
167
              </DropdownMenuSubContent>
168
            </DropdownMenuPortal>
169
          </DropdownMenuSub>
170
        </DropdownMenuGroup>
171
        <DropdownMenuSeparator />
172
        <DropdownMenuGroup>
173
          <DropdownMenuLabel>Account</DropdownMenuLabel>
174
          <DropdownMenuItem>
175
            <UserIcon />
176
            Profile<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
177
          </DropdownMenuItem>
178
          <DropdownMenuItem>
179
            <CreditCardIcon />
180
            Billing
181
          </DropdownMenuItem>
182
          <DropdownMenuSub>
183
            <DropdownMenuSubTrigger>
184
              <SettingsIcon />
185
              Settings
186
            </DropdownMenuSubTrigger>
187
            <DropdownMenuPortal>
188
              <DropdownMenuSubContent>
189
                <DropdownMenuGroup>
190
                  <DropdownMenuLabel>Preferences</DropdownMenuLabel>
191
                  <DropdownMenuItem>
192
                    <KeyboardIcon />
193
                    Keyboard Shortcuts
194
                  </DropdownMenuItem>
195
                  <DropdownMenuItem>
196
                    <LanguagesIcon />
197
                    Language
198
                  </DropdownMenuItem>
199
                  <DropdownMenuSub>
200
                    <DropdownMenuSubTrigger>
201
                      <BellIcon />
202
                      Notifications
203
                    </DropdownMenuSubTrigger>
204
                    <DropdownMenuPortal>
205
                      <DropdownMenuSubContent>
206
                        <DropdownMenuGroup>
207
                          <DropdownMenuLabel>Notification Types</DropdownMenuLabel>
208
                          <DropdownMenuCheckboxItem
209
                            checked={notifications().push}
210
                            onChange={(checked) =>
211
                              setNotifications({ ...notifications(), push: checked === true })
212
                            }
213
                          >
214
                            <BellIcon />
215
                            Push Notifications
216
                          </DropdownMenuCheckboxItem>
217
                          <DropdownMenuCheckboxItem
218
                            checked={notifications().email}
219
                            onChange={(checked) =>
220
                              setNotifications({ ...notifications(), email: checked === true })
221
                            }
222
                          >
223
                            <MailIcon />
224
                            Email Notifications
225
                          </DropdownMenuCheckboxItem>
226
                        </DropdownMenuGroup>
227
                      </DropdownMenuSubContent>
228
                    </DropdownMenuPortal>
229
                  </DropdownMenuSub>
230
                </DropdownMenuGroup>
231
                <DropdownMenuSeparator />
232
                <DropdownMenuGroup>
233
                  <DropdownMenuItem>
234
                    <ShieldIcon />
235
                    Privacy & Security
236
                  </DropdownMenuItem>
237
                </DropdownMenuGroup>
238
              </DropdownMenuSubContent>
239
            </DropdownMenuPortal>
240
          </DropdownMenuSub>
241
        </DropdownMenuGroup>
242
        <DropdownMenuSeparator />
243
        <DropdownMenuGroup>
244
          <DropdownMenuItem>
245
            <HelpCircleIcon />
246
            Help & Support
247
          </DropdownMenuItem>
248
          <DropdownMenuItem>
249
            <FileTextIcon />
250
            Documentation
251
          </DropdownMenuItem>
252
        </DropdownMenuGroup>
253
        <DropdownMenuSeparator />
254
        <DropdownMenuGroup>
255
          <DropdownMenuItem variant="destructive">
256
            <LogOutIcon />
257
            Sign Out<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
258
          </DropdownMenuItem>
259
        </DropdownMenuGroup>
260
      </DropdownMenuContent>
261
    </DropdownMenu>
262
  );
263
}

API Reference

See the Kobalte Dropdown Menu API reference for primitive props, keyboard behavior, and accessibility details.