Dropdown Menu - Zaidan

Zaidan

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

Installation

CLI

npx shadcn@latest add @zaidan/dropdown-menu

pnpx shadcn add @zaidan/dropdown-menu

yarn dlx shadcn@latest add @zaidan/dropdown-menu

bunx shadcn@latest add @zaidan/dropdown-menu

Manual

Copy and paste the following code into your project.

1
import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-menu";
2
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3
import { Check, ChevronRight } from "lucide-solid";
4
import type { ComponentProps, ValidComponent } from "solid-js";
5
import { mergeProps, splitProps } from "solid-js";
6
import { cn } from "~/lib/utils";
7

8
type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuRootProps;
9

10
const DropdownMenu = (props: DropdownMenuProps) => {
11
  const mergedProps = mergeProps({ gutter: 4 }, props);
12
  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...mergedProps} />;
13
};
14

15
type DropdownMenuPortalProps = DropdownMenuPrimitive.DropdownMenuPortalProps;
16

17
const DropdownMenuPortal = (props: DropdownMenuPortalProps) => {
18
  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
19
};
20

21
type DropdownMenuTriggerProps<T extends ValidComponent = "button"> = PolymorphicProps<
22
  T,
23
  DropdownMenuPrimitive.DropdownMenuTriggerProps<T>
24
> &
25
  Pick<ComponentProps<T>, "class">;
26

27
const DropdownMenuTrigger = <T extends ValidComponent = "button">(
28
  props: DropdownMenuTriggerProps<T>,
29
) => {
30
  const [local, others] = splitProps(props as DropdownMenuTriggerProps, ["class"]);
31
  return (
32
    <DropdownMenuPrimitive.Trigger
33
      class={local.class}
34
      data-slot="dropdown-menu-trigger"
35
      {...others}
36
    />
37
  );
38
};
39

40
type DropdownMenuContentProps<T extends ValidComponent = "div"> = PolymorphicProps<
41
  T,
42
  DropdownMenuPrimitive.DropdownMenuContentProps<T>
43
> &
44
  Pick<ComponentProps<T>, "class">;
45

46
const DropdownMenuContent = <T extends ValidComponent = "div">(
47
  props: DropdownMenuContentProps<T>,
48
) => {
49
  const [local, others] = splitProps(props as DropdownMenuContentProps, ["class"]);
50
  return (
51
    <DropdownMenuPrimitive.Portal>
52
      <DropdownMenuPrimitive.Content
53
        data-slot="dropdown-menu-content"
54
        class={cn(
55
          "z-50 z-dropdown-menu-content z-menu-target max-h-(--kb-popper-available-height) min-w-32 origin-(--kb-menu-content-transform-origin) overflow-y-auto overflow-x-hidden outline-none data-closed:overflow-hidden",
56
          local.class,
57
        )}
58
        {...others}
59
      />
60
    </DropdownMenuPrimitive.Portal>
61
  );
62
};
63

64
type DropdownMenuGroupProps<T extends ValidComponent = "div"> = PolymorphicProps<
65
  T,
66
  DropdownMenuPrimitive.DropdownMenuGroupProps<T>
67
> &
68
  Pick<ComponentProps<T>, "class">;
69

70
const DropdownMenuGroup = <T extends ValidComponent = "div">(props: DropdownMenuGroupProps<T>) => {
71
  const [local, others] = splitProps(props as DropdownMenuGroupProps, ["class"]);
72
  return (
73
    <DropdownMenuPrimitive.Group class={local.class} data-slot="dropdown-menu-group" {...others} />
74
  );
75
};
76

77
type DropdownMenuLabelProps<T extends ValidComponent = "span"> = PolymorphicProps<
78
  T,
79
  DropdownMenuPrimitive.DropdownMenuGroupLabelProps<T>
80
> &
81
  Pick<ComponentProps<T>, "class"> & {
82
    inset?: boolean;
83
  };
84

85
const DropdownMenuLabel = <T extends ValidComponent = "span">(props: DropdownMenuLabelProps<T>) => {
86
  const [local, others] = splitProps(props as DropdownMenuLabelProps, ["class", "inset"]);
87
  return (
88
    <DropdownMenuPrimitive.GroupLabel
89
      data-slot="dropdown-menu-label"
90
      data-inset={local.inset}
91
      class={cn("z-dropdown-menu-label data-inset:pl-8", local.class)}
92
      {...others}
93
    />
94
  );
95
};
96

97
type DropdownMenuItemProps<T extends ValidComponent = "div"> = PolymorphicProps<
98
  T,
99
  DropdownMenuPrimitive.DropdownMenuItemProps<T>
100
> &
101
  Pick<ComponentProps<T>, "class"> & {
102
    inset?: boolean;
103
    variant?: "default" | "destructive";
104
  };
105

106
const DropdownMenuItem = <T extends ValidComponent = "div">(rawProps: DropdownMenuItemProps<T>) => {
107
  const props = mergeProps({ variant: "default" } as DropdownMenuItemProps<T>, rawProps);
108
  const [local, others] = splitProps(props as DropdownMenuItemProps, ["class", "inset", "variant"]);
109
  return (
110
    <DropdownMenuPrimitive.Item
111
      data-slot="dropdown-menu-item"
112
      data-inset={local.inset}
113
      data-variant={local.variant}
114
      class={cn(
115
        "group/dropdown-menu-item relative z-dropdown-menu-item flex cursor-default select-none items-center outline-hidden data-disabled:pointer-events-none data-inset:pl-8 data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
116
        local.class,
117
      )}
118
      {...others}
119
    />
120
  );
121
};
122

123
type DropdownMenuSubProps = DropdownMenuPrimitive.DropdownMenuSubProps;
124

125
const DropdownMenuSub = (props: DropdownMenuSubProps) => {
126
  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
127
};
128

129
type DropdownMenuSubTriggerProps<T extends ValidComponent = "div"> = PolymorphicProps<
130
  T,
131
  DropdownMenuPrimitive.DropdownMenuSubTriggerProps<T>
132
> &
133
  Pick<ComponentProps<T>, "class" | "children"> & {
134
    inset?: boolean;
135
  };
136

137
const DropdownMenuSubTrigger = <T extends ValidComponent = "div">(
138
  props: DropdownMenuSubTriggerProps<T>,
139
) => {
140
  const [local, others] = splitProps(props as DropdownMenuSubTriggerProps, [
141
    "class",
142
    "inset",
143
    "children",
144
  ]);
145
  return (
146
    <DropdownMenuPrimitive.SubTrigger
147
      data-slot="dropdown-menu-sub-trigger"
148
      data-inset={local.inset}
149
      class={cn(
150
        "z-dropdown-menu-sub-trigger flex cursor-default select-none items-center outline-hidden data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
151
        local.class,
152
      )}
153
      {...others}
154
    >
155
      {local.children}
156
      <ChevronRight class="ml-auto" />
157
    </DropdownMenuPrimitive.SubTrigger>
158
  );
159
};
160

161
type DropdownMenuSubContentProps<T extends ValidComponent = "div"> = PolymorphicProps<
162
  T,
163
  DropdownMenuPrimitive.DropdownMenuSubContentProps<T>
164
> &
165
  Pick<ComponentProps<T>, "class">;
166

167
const DropdownMenuSubContent = <T extends ValidComponent = "div">(
168
  props: DropdownMenuSubContentProps<T>,
169
) => {
170
  const [local, others] = splitProps(props as DropdownMenuSubContentProps, ["class"]);
171
  return (
172
    <DropdownMenuPrimitive.Portal>
173
      <DropdownMenuPrimitive.SubContent
174
        data-slot="dropdown-menu-sub-content"
175
        class={cn(
176
          "z-50 z-dropdown-menu-sub-content z-menu-target max-h-(--kb-popper-available-height) min-w-32 origin-(--kb-menu-content-transform-origin) overflow-y-auto overflow-x-hidden outline-none data-closed:overflow-hidden",
177
          local.class,
178
        )}
179
        {...others}
180
      />
181
    </DropdownMenuPrimitive.Portal>
182
  );
183
};
184

185
type DropdownMenuCheckboxItemProps<T extends ValidComponent = "div"> = PolymorphicProps<
186
  T,
187
  DropdownMenuPrimitive.DropdownMenuCheckboxItemProps<T>
188
> &
189
  Pick<ComponentProps<T>, "class" | "children">;
190

191
const DropdownMenuCheckboxItem = <T extends ValidComponent = "div">(
192
  props: DropdownMenuCheckboxItemProps<T>,
193
) => {
194
  const [local, others] = splitProps(props as DropdownMenuCheckboxItemProps, ["class", "children"]);
195
  return (
196
    <DropdownMenuPrimitive.CheckboxItem
197
      data-slot="dropdown-menu-checkbox-item"
198
      class={cn(
199
        "relative z-dropdown-menu-checkbox-item flex cursor-default select-none items-center outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
200
        local.class,
201
      )}
202
      {...others}
203
    >
204
      <span
205
        class="pointer-events-none z-dropdown-menu-item-indicator"
206
        data-slot="dropdown-menu-checkbox-item-indicator"
207
      >
208
        <DropdownMenuPrimitive.ItemIndicator>
209
          <Check />
210
        </DropdownMenuPrimitive.ItemIndicator>
211
      </span>
212
      {local.children}
213
    </DropdownMenuPrimitive.CheckboxItem>
214
  );
215
};
216

217
type DropdownMenuRadioGroupProps<T extends ValidComponent = "div"> = PolymorphicProps<
218
  T,
219
  DropdownMenuPrimitive.DropdownMenuRadioGroupProps<T>
220
> &
221
  Pick<ComponentProps<T>, "class">;
222

223
const DropdownMenuRadioGroup = <T extends ValidComponent = "div">(
224
  props: DropdownMenuRadioGroupProps<T>,
225
) => {
226
  const [local, others] = splitProps(props as DropdownMenuRadioGroupProps, ["class"]);
227
  return (
228
    <DropdownMenuPrimitive.RadioGroup
229
      class={local.class}
230
      data-slot="dropdown-menu-radio-group"
231
      {...others}
232
    />
233
  );
234
};
235

236
type DropdownMenuRadioItemProps<T extends ValidComponent = "div"> = PolymorphicProps<
237
  T,
238
  DropdownMenuPrimitive.DropdownMenuRadioItemProps<T>
239
> &
240
  Pick<ComponentProps<T>, "class" | "children">;
241

242
const DropdownMenuRadioItem = <T extends ValidComponent = "div">(
243
  props: DropdownMenuRadioItemProps<T>,
244
) => {
245
  const [local, others] = splitProps(props as DropdownMenuRadioItemProps, ["class", "children"]);
246
  return (
247
    <DropdownMenuPrimitive.RadioItem
248
      data-slot="dropdown-menu-radio-item"
249
      class={cn(
250
        "relative z-dropdown-menu-radio-item flex cursor-default select-none items-center outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
251
        local.class,
252
      )}
253
      {...others}
254
    >
255
      <span
256
        class="pointer-events-none z-dropdown-menu-item-indicator"
257
        data-slot="dropdown-menu-radio-item-indicator"
258
      >
259
        <DropdownMenuPrimitive.ItemIndicator>
260
          <Check />
261
        </DropdownMenuPrimitive.ItemIndicator>
262
      </span>
263
      {local.children}
264
    </DropdownMenuPrimitive.RadioItem>
265
  );
266
};
267

268
type DropdownMenuSeparatorProps<T extends ValidComponent = "hr"> = PolymorphicProps<
269
  T,
270
  DropdownMenuPrimitive.DropdownMenuSeparatorProps<T>
271
> &
272
  Pick<ComponentProps<T>, "class">;
273

274
const DropdownMenuSeparator = <T extends ValidComponent = "hr">(
275
  props: DropdownMenuSeparatorProps<T>,
276
) => {
277
  const [local, others] = splitProps(props as DropdownMenuSeparatorProps, ["class"]);
278
  return (
279
    <DropdownMenuPrimitive.Separator
280
      data-slot="dropdown-menu-separator"
281
      class={cn("z-dropdown-menu-separator", local.class)}
282
      {...others}
283
    />
284
  );
285
};
286

287
type DropdownMenuShortcutProps = ComponentProps<"span">;
288

289
const DropdownMenuShortcut = (props: DropdownMenuShortcutProps) => {
290
  const [local, others] = splitProps(props, ["class"]);
291
  return (
292
    <span
293
      data-slot="dropdown-menu-shortcut"
294
      class={cn("z-dropdown-menu-shortcut", local.class)}
295
      {...others}
296
    />
297
  );
298
};
299

300
export {
301
  DropdownMenu,
302
  DropdownMenuPortal,
303
  DropdownMenuTrigger,
304
  DropdownMenuContent,
305
  DropdownMenuGroup,
306
  DropdownMenuLabel,
307
  DropdownMenuItem,
308
  DropdownMenuCheckboxItem,
309
  DropdownMenuRadioGroup,
310
  DropdownMenuRadioItem,
311
  DropdownMenuSeparator,
312
  DropdownMenuShortcut,
313
  DropdownMenuSub,
314
  DropdownMenuSubTrigger,
315
  DropdownMenuSubContent,
316
};

Examples

Here are the source code of all the examples from the preview page:

Basic

import { Button } from "~/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";

function DropdownMenuBasic() {
  return (
    <Example title="Basic">
      <DropdownMenu>
        <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
          Open
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuGroup>
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuItem>Profile</DropdownMenuItem>
            <DropdownMenuItem>Billing</DropdownMenuItem>
            <DropdownMenuItem>Settings</DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuItem>GitHub</DropdownMenuItem>
          <DropdownMenuItem>Support</DropdownMenuItem>
          <DropdownMenuItem disabled>API</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </Example>
  );
}

With Icons

import { CreditCard, LogOut, Settings, User } from "lucide-solid";
import { Button } from "~/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";

function DropdownMenuWithIcons() {
  return (
    <Example title="With Icons">
      <DropdownMenu>
        <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
          Open
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <User />
            Profile
          </DropdownMenuItem>
          <DropdownMenuItem>
            <CreditCard />
            Billing
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Settings />
            Settings
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem variant="destructive">
            <LogOut />
            Log out
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </Example>
  );
}

With Shortcuts

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

function DropdownMenuWithShortcuts() {
  return (
    <Example title="With Shortcuts">
      <DropdownMenu>
        <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
          Open
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuGroup>
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuItem>
              Profile
              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
              Billing
              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
              Settings
              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
              Keyboard shortcuts
              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            Log out
            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </Example>
  );
}

With Submenu

import { Button } from "~/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuPortal,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";

function DropdownMenuWithSubmenu() {
  return (
    <Example title="With Submenu">
      <DropdownMenu>
        <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
          Open
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuGroup>
            <DropdownMenuItem>Team</DropdownMenuItem>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
              <DropdownMenuPortal>
                <DropdownMenuSubContent>
                  <DropdownMenuItem>Email</DropdownMenuItem>
                  <DropdownMenuItem>Message</DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>More...</DropdownMenuItem>
                </DropdownMenuSubContent>
              </DropdownMenuPortal>
            </DropdownMenuSub>
            <DropdownMenuItem>
              New Team
              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
            </DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </Example>
  );
}

With Checkboxes

import { Activity, Layout, PanelLeft } from "lucide-solid";
import { createSignal } from "solid-js";
import { Button } from "~/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";

function DropdownMenuWithCheckboxes() {
  const [showStatusBar, setShowStatusBar] = createSignal(true);
  const [showActivityBar, setShowActivityBar] = createSignal(false);
  const [showPanel, setShowPanel] = createSignal(false);

  return (
    <Example title="With Checkboxes">
      <DropdownMenu>
        <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
          Checkboxes
        </DropdownMenuTrigger>
        <DropdownMenuContent class="min-w-40">
          <DropdownMenuGroup>
            <DropdownMenuLabel>Appearance</DropdownMenuLabel>
            <DropdownMenuCheckboxItem checked={showStatusBar()} onChange={setShowStatusBar}>
              <Layout />
              Status Bar
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem
              checked={showActivityBar()}
              onChange={setShowActivityBar}
              disabled
            >
              <Activity />
              Activity Bar
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem checked={showPanel()} onChange={setShowPanel}>
              <PanelLeft />
              Panel
            </DropdownMenuCheckboxItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </Example>
  );
}

With Radio Group

import { ArrowDown, ArrowRight, ArrowUp } from "lucide-solid";
import { createSignal } from "solid-js";
import { Button } from "~/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";

function DropdownMenuWithRadio() {
  const [position, setPosition] = createSignal("bottom");

  return (
    <Example title="With Radio Group">
      <DropdownMenu>
        <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
          Radio Group
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuGroup>
            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
            <DropdownMenuRadioGroup value={position()} onChange={setPosition}>
              <DropdownMenuRadioItem value="top">
                <ArrowUp />
                Top
              </DropdownMenuRadioItem>
              <DropdownMenuRadioItem value="bottom">
                <ArrowDown />
                Bottom
              </DropdownMenuRadioItem>
              <DropdownMenuRadioItem value="right" disabled>
                <ArrowRight />
                Right
              </DropdownMenuRadioItem>
            </DropdownMenuRadioGroup>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </Example>
  );
}

Checkboxes with Icons

import { Bell, Mail, MessageSquare } from "lucide-solid";
import { createSignal } from "solid-js";
import { Button } from "~/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";

function DropdownMenuWithCheckboxesIcons() {
  const [notifications, setNotifications] = createSignal({
    email: true,
    sms: false,
    push: true,
  });

  return (
    <Example title="Checkboxes with Icons">
      <DropdownMenu>
        <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
          Notifications
        </DropdownMenuTrigger>
        <DropdownMenuContent class="min-w-56">
          <DropdownMenuGroup>
            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>
            <DropdownMenuCheckboxItem
              checked={notifications().email}
              onChange={(checked) =>
                setNotifications({ ...notifications(), email: checked === true })
              }
            >
              <Mail />
              Email notifications
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem
              checked={notifications().sms}
              onChange={(checked) =>
                setNotifications({ ...notifications(), sms: checked === true })
              }
            >
              <MessageSquare />
              SMS notifications
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem
              checked={notifications().push}
              onChange={(checked) =>
                setNotifications({ ...notifications(), push: checked === true })
              }
            >
              <Bell />
              Push notifications
            </DropdownMenuCheckboxItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </Example>
  );
}

Radio with Icons

import { Building2, CreditCard, Wallet } from "lucide-solid";
import { createSignal } from "solid-js";
import { Button } from "~/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";

function DropdownMenuWithRadioIcons() {
  const [paymentMethod, setPaymentMethod] = createSignal("card");

  return (
    <Example title="Radio with Icons">
      <DropdownMenu>
        <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
          Payment Method
        </DropdownMenuTrigger>
        <DropdownMenuContent class="min-w-56">
          <DropdownMenuGroup>
            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>
            <DropdownMenuRadioGroup value={paymentMethod()} onChange={setPaymentMethod}>
              <DropdownMenuRadioItem value="card">
                <CreditCard />
                Credit Card
              </DropdownMenuRadioItem>
              <DropdownMenuRadioItem value="paypal">
                <Wallet />
                PayPal
              </DropdownMenuRadioItem>
              <DropdownMenuRadioItem value="bank">
                <Building2 />
                Bank Transfer
              </DropdownMenuRadioItem>
            </DropdownMenuRadioGroup>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </Example>
  );
}

With Destructive Items

import { Archive, Pencil, Share, Trash } from "lucide-solid";
import { Button } from "~/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";

function DropdownMenuWithDestructive() {
  return (
    <Example title="With Destructive Items">
      <DropdownMenu>
        <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
          Actions
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Pencil />
            Edit
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Share />
            Share
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            <Archive />
            Archive
          </DropdownMenuItem>
          <DropdownMenuItem variant="destructive">
            <Trash />
            Delete
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </Example>
  );
}

With Avatar

import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut } from "lucide-solid";
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
import { Button } from "~/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";

function DropdownMenuWithAvatar() {
  return (
    <Example title="With Avatar">
      <div class="flex items-center justify-between gap-4">
        <DropdownMenu placement="top-end">
          <DropdownMenuTrigger
            as={Button}
            variant="outline"
            class="h-12 justify-start px-2 md:max-w-[200px]"
          >
            <Avatar>
              <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
              <AvatarFallback class="rounded-lg">CN</AvatarFallback>
            </Avatar>
            <div class="grid flex-1 text-left text-sm leading-tight">
              <span class="truncate font-semibold">shadcn</span>
              <span class="truncate text-muted-foreground text-xs">shadcn@example.com</span>
            </div>
            <ChevronsUpDown class="ml-auto text-muted-foreground" />
          </DropdownMenuTrigger>
          <DropdownMenuContent class="w-(--anchor-width) min-w-56">
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <BadgeCheck />
                Account
              </DropdownMenuItem>
              <DropdownMenuItem>
                <CreditCard />
                Billing
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Bell />
                Notifications
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <LogOut />
              Sign Out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
        <DropdownMenu>
          <DropdownMenuTrigger as={Button} variant="ghost" size="icon" class="rounded-full">
            <Avatar>
              <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
              <AvatarFallback>LR</AvatarFallback>
            </Avatar>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            {" "}
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <BadgeCheck />
                Account
              </DropdownMenuItem>
              <DropdownMenuItem>
                <CreditCard />
                Billing
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Bell />
                Notifications
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <LogOut />
              Sign Out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </Example>
  );
}

In Dialog

import { ClipboardPaste, Copy, Scissors, Trash } from "lucide-solid";
import { Button } from "~/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "~/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuPortal,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";

function DropdownMenuInDialog() {
  return (
    <Example title="In Dialog">
      <Dialog>
        <DialogTrigger as={Button} variant="outline">
          Open Dialog
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Dropdown Menu Example</DialogTitle>
            <DialogDescription>Click the button below to see the dropdown menu.</DialogDescription>
          </DialogHeader>
          <DropdownMenu>
            <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
              Open Menu
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuItem>
                <Copy />
                Copy
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Scissors />
                Cut
              </DropdownMenuItem>
              <DropdownMenuItem>
                <ClipboardPaste />
                Paste
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuSub>
                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
                <DropdownMenuPortal>
                  <DropdownMenuSubContent>
                    <DropdownMenuItem>Save Page...</DropdownMenuItem>
                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>
                    <DropdownMenuItem>Name Window...</DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>
                  </DropdownMenuSubContent>
                </DropdownMenuPortal>
              </DropdownMenuSub>
              <DropdownMenuSeparator />
              <DropdownMenuItem variant="destructive">
                <Trash />
                Delete
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </DialogContent>
      </Dialog>
    </Example>
  );
}

Complex

import {
  Bell,
  CreditCard,
  Download,
  Eye,
  File,
  FileCode,
  FileText,
  Folder,
  FolderOpen,
  FolderSearch,
  HelpCircle,
  Keyboard,
  Languages,
  Layout,
  LogOut,
  Mail,
  Monitor,
  Moon,
  MoreHorizontal,
  Palette,
  Save,
  Settings,
  Shield,
  Sun,
  User,
} from "lucide-solid";
import { createSignal } from "solid-js";
import { Button } from "~/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";

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

  return (
    <Example title="Complex">
      <DropdownMenu>
        <DropdownMenuTrigger as={Button} variant="outline" class="w-fit">
          Complex Menu
        </DropdownMenuTrigger>
        <DropdownMenuContent class="style-lyra:w-48 style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56">
          <DropdownMenuGroup>
            <DropdownMenuLabel>File</DropdownMenuLabel>
            <DropdownMenuItem>
              <File />
              New File
              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
              <Folder />
              New Folder
              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>
                <FolderOpen />
                Open Recent
              </DropdownMenuSubTrigger>
              <DropdownMenuPortal>
                <DropdownMenuSubContent>
                  <DropdownMenuGroup>
                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
                    <DropdownMenuItem>
                      <FileCode />
                      Project Alpha
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                      <FileCode />
                      Project Beta
                    </DropdownMenuItem>
                    <DropdownMenuSub>
                      <DropdownMenuSubTrigger>
                        <MoreHorizontal />
                        More Projects
                      </DropdownMenuSubTrigger>
                      <DropdownMenuPortal>
                        <DropdownMenuSubContent>
                          <DropdownMenuItem>
                            <FileCode />
                            Project Gamma
                          </DropdownMenuItem>
                          <DropdownMenuItem>
                            <FileCode />
                            Project Delta
                          </DropdownMenuItem>
                        </DropdownMenuSubContent>
                      </DropdownMenuPortal>
                    </DropdownMenuSub>
                  </DropdownMenuGroup>
                  <DropdownMenuSeparator />
                  <DropdownMenuGroup>
                    <DropdownMenuItem>
                      <FolderSearch />
                      Browse...
                    </DropdownMenuItem>
                  </DropdownMenuGroup>
                </DropdownMenuSubContent>
              </DropdownMenuPortal>
            </DropdownMenuSub>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <Save />
              Save
              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
              <Download />
              Export
              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuLabel>View</DropdownMenuLabel>
            <DropdownMenuCheckboxItem
              checked={notifications().email}
              onChange={(checked) =>
                setNotifications({ ...notifications(), email: checked === true })
              }
            >
              <Eye />
              Show Sidebar
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem
              checked={notifications().sms}
              onChange={(checked) =>
                setNotifications({ ...notifications(), sms: checked === true })
              }
            >
              <Layout />
              Show Status Bar
            </DropdownMenuCheckboxItem>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>
                <Palette />
                Theme
              </DropdownMenuSubTrigger>
              <DropdownMenuPortal>
                <DropdownMenuSubContent>
                  <DropdownMenuGroup>
                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>
                    <DropdownMenuRadioGroup value={theme()} onChange={setTheme}>
                      <DropdownMenuRadioItem value="light">
                        <Sun />
                        Light
                      </DropdownMenuRadioItem>
                      <DropdownMenuRadioItem value="dark">
                        <Moon />
                        Dark
                      </DropdownMenuRadioItem>
                      <DropdownMenuRadioItem value="system">
                        <Monitor />
                        System
                      </DropdownMenuRadioItem>
                    </DropdownMenuRadioGroup>
                  </DropdownMenuGroup>
                </DropdownMenuSubContent>
              </DropdownMenuPortal>
            </DropdownMenuSub>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuLabel>Account</DropdownMenuLabel>
            <DropdownMenuItem>
              <User />
              Profile
              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
              <CreditCard />
              Billing
            </DropdownMenuItem>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>
                <Settings />
                Settings
              </DropdownMenuSubTrigger>
              <DropdownMenuPortal>
                <DropdownMenuSubContent>
                  <DropdownMenuGroup>
                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>
                    <DropdownMenuItem>
                      <Keyboard />
                      Keyboard Shortcuts
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                      <Languages />
                      Language
                    </DropdownMenuItem>
                    <DropdownMenuSub>
                      <DropdownMenuSubTrigger>
                        <Bell />
                        Notifications
                      </DropdownMenuSubTrigger>
                      <DropdownMenuPortal>
                        <DropdownMenuSubContent>
                          <DropdownMenuGroup>
                            <DropdownMenuLabel>Notification Types</DropdownMenuLabel>
                            <DropdownMenuCheckboxItem
                              checked={notifications().push}
                              onChange={(checked) =>
                                setNotifications({
                                  ...notifications(),
                                  push: checked === true,
                                })
                              }
                            >
                              <Bell />
                              Push Notifications
                            </DropdownMenuCheckboxItem>
                            <DropdownMenuCheckboxItem
                              checked={notifications().email}
                              onChange={(checked) =>
                                setNotifications({
                                  ...notifications(),
                                  email: checked === true,
                                })
                              }
                            >
                              <Mail />
                              Email Notifications
                            </DropdownMenuCheckboxItem>
                          </DropdownMenuGroup>
                        </DropdownMenuSubContent>
                      </DropdownMenuPortal>
                    </DropdownMenuSub>
                  </DropdownMenuGroup>
                  <DropdownMenuSeparator />
                  <DropdownMenuGroup>
                    <DropdownMenuItem>
                      <Shield />
                      Privacy & Security
                    </DropdownMenuItem>
                  </DropdownMenuGroup>
                </DropdownMenuSubContent>
              </DropdownMenuPortal>
            </DropdownMenuSub>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem>
              <HelpCircle />
              Help & Support
            </DropdownMenuItem>
            <DropdownMenuItem>
              <FileText />
              Documentation
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem variant="destructive">
              <LogOut />
              Sign Out
              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
            </DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </Example>
  );
}

Preview Docs

Build your own Zaidan

When you're done, click Setup Project to setup your new project.