Dropdown Menu

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

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

export function DropdownMenuDemo() {
  return (
    <DropdownMenu placement="bottom-start">
      <DropdownMenuTrigger as={Button<"button">} variant="outline">
        Open
      </DropdownMenuTrigger>
      <DropdownMenuContent class="w-56">
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuGroup>
          <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 />
        <DropdownMenuGroup>
          <DropdownMenuItem>Team</DropdownMenuItem>
          <DropdownMenuSub overlap>
            <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>
        <DropdownMenuSeparator />
        <DropdownMenuItem>GitHub</DropdownMenuItem>
        <DropdownMenuItem>Support</DropdownMenuItem>
        <DropdownMenuItem disabled>API</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          Log out
          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem variant="destructive">
          Delete Account
          <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Installation

CLI

npx solidui-cli@latest add dropdown-menu

pnpx solidui-cli@latest add dropdown-menu

yarn dlx solidui-cli@latest add dropdown-menu

bunx --bun solidui-cli@latest add dropdown-menu

dpx solidui-cli@latest add dropdown-menu

Manual

Install the following dependencies:

npm install @kobalte/core

pnpm add @kobalte/core

yarn add @kobalte/core

bun add @kobalte/core

deno add npm:@kobalte/core

Copy and paste the following code into your project.

dropdown-menu.tsx

1
import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
2
import { mergeProps, splitProps } from "solid-js"
3

4
import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-menu"
5
import type { PolymorphicProps } from "@kobalte/core/polymorphic"
6

7
import { cn } from "~/lib/utils"
8

9
const DropdownMenu: Component<DropdownMenuPrimitive.DropdownMenuRootProps> = (props) => {
10
  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" gutter={4} {...props} />
11
}
12

13
const DropdownMenuPortal: Component<DropdownMenuPrimitive.DropdownMenuPortalProps> = (props) => (
14
  <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
15
)
16

17
const DropdownMenuTrigger = <T extends ValidComponent = "button">(
18
  props: PolymorphicProps<T, DropdownMenuPrimitive.DropdownMenuTriggerProps<T>>
19
) => <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
20

21
type DropdownMenuContentProps<T extends ValidComponent = "div"> =
22
  DropdownMenuPrimitive.DropdownMenuContentProps<T> & {
23
    class?: string | undefined
24
  }
25

26
const DropdownMenuContent = <T extends ValidComponent = "div">(
27
  props: PolymorphicProps<T, DropdownMenuContentProps<T>>
28
) => {
29
  const [local, others] = splitProps(props as DropdownMenuContentProps, ["class"])
30
  return (
31
    <DropdownMenuPrimitive.Portal>
32
      <DropdownMenuPrimitive.Content
33
        class={cn(
34
          "data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 z-50 max-h-(--kb-popper-content-available-height) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[closed]:animate-out data-[expanded]:animate-in",
35
          local.class
36
        )}
37
        data-slot="dropdown-menu-content"
38
        {...others}
39
      />
40
    </DropdownMenuPrimitive.Portal>
41
  )
42
}
43

44
const DropdownMenuGroup: Component<DropdownMenuPrimitive.DropdownMenuGroupProps> = (props) => (
45
  <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
46
)
47

48
type DropdownMenuItemProps<T extends ValidComponent = "div"> =
49
  DropdownMenuPrimitive.DropdownMenuItemProps<T> & {
50
    class?: string | undefined
51
    variant?: "default" | "destructive"
52
  }
53

54
const DropdownMenuItem = <T extends ValidComponent = "div">(
55
  rawProps: PolymorphicProps<T, DropdownMenuItemProps<T>>
56
) => {
57
  const props = mergeProps({ variant: "default" }, rawProps)
58
  const [local, others] = splitProps(props as DropdownMenuItemProps, ["class", "variant"])
59
  return (
60
    <DropdownMenuPrimitive.Item
61
      class={cn(
62
        "data-[variant=destructive]:*:[svg]:!text-destructive relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[disabled]:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
63
        local.class
64
      )}
65
      data-slot="dropdown-menu-item"
66
      data-variant={local.variant}
67
      {...others}
68
    />
69
  )
70
}
71

72
const DropdownMenuShortcut: Component<ComponentProps<"span">> = (props) => {
73
  const [local, others] = splitProps(props, ["class"])
74
  return (
75
    <span
76
      class={cn("ml-auto text-muted-foreground text-xs tracking-widest", local.class)}
77
      data-slot="dropdown-menu-shortcut"
78
      {...others}
79
    />
80
  )
81
}
82

83
const DropdownMenuLabel: Component<ComponentProps<"div"> & { inset?: boolean }> = (props) => {
84
  const [local, others] = splitProps(props, ["class", "inset"])
85
  return (
86
    <div
87
      class={cn("px-2 py-1.5 font-medium text-sm data-[inset]:pl-8", local.class)}
88
      data-inset={local.inset}
89
      data-slot="dropdown-menu-label"
90
      {...others}
91
    />
92
  )
93
}
94

95
type DropdownMenuSeparatorProps<T extends ValidComponent = "hr"> =
96
  DropdownMenuPrimitive.DropdownMenuSeparatorProps<T> & {
97
    class?: string | undefined
98
  }
99

100
const DropdownMenuSeparator = <T extends ValidComponent = "hr">(
101
  props: PolymorphicProps<T, DropdownMenuSeparatorProps<T>>
102
) => {
103
  const [local, others] = splitProps(props as DropdownMenuSeparatorProps, ["class"])
104
  return (
105
    <DropdownMenuPrimitive.Separator
106
      class={cn("-mx-1 my-1 h-px bg-border", local.class)}
107
      data-slot="dropdown-menu-separator"
108
      {...others}
109
    />
110
  )
111
}
112

113
const DropdownMenuSub: Component<DropdownMenuPrimitive.DropdownMenuSubProps> = (props) => (
114
  <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
115
)
116

117
type DropdownMenuSubTriggerProps<T extends ValidComponent = "div"> =
118
  DropdownMenuPrimitive.DropdownMenuSubTriggerProps<T> & {
119
    class?: string | undefined
120
    children?: JSX.Element
121
  }
122

123
const DropdownMenuSubTrigger = <T extends ValidComponent = "div">(
124
  props: PolymorphicProps<T, DropdownMenuSubTriggerProps<T>>
125
) => {
126
  const [local, others] = splitProps(props as DropdownMenuSubTriggerProps, ["class", "children"])
127
  return (
128
    <DropdownMenuPrimitive.SubTrigger
129
      class={cn(
130
        "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[expanded]:bg-accent data-[inset]:pl-8 data-[expanded]:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
131
        local.class
132
      )}
133
      data-slot="dropdown-menu-sub-trigger"
134
      {...others}
135
    >
136
      {local.children}
137
      <svg
138
        class="ml-auto size-4"
139
        fill="none"
140
        stroke="currentColor"
141
        stroke-linecap="round"
142
        stroke-linejoin="round"
143
        stroke-width="2"
144
        viewBox="0 0 24 24"
145
        xmlns="http://www.w3.org/2000/svg"
146
      >
147
        <path d="M9 6l6 6l-6 6" />
148
      </svg>
149
    </DropdownMenuPrimitive.SubTrigger>
150
  )
151
}
152

153
type DropdownMenuSubContentProps<T extends ValidComponent = "div"> =
154
  DropdownMenuPrimitive.DropdownMenuSubContentProps<T> & {
155
    class?: string | undefined
156
  }
157

158
const DropdownMenuSubContent = <T extends ValidComponent = "div">(
159
  props: PolymorphicProps<T, DropdownMenuSubContentProps<T>>
160
) => {
161
  const [local, others] = splitProps(props as DropdownMenuSubContentProps, ["class"])
162
  return (
163
    <DropdownMenuPrimitive.SubContent
164
      class={cn(
165
        "data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 z-50 min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[closed]:animate-out data-[expanded]:animate-in",
166
        local.class
167
      )}
168
      data-slot="dropdown-menu-sub-content"
169
      {...others}
170
    />
171
  )
172
}
173

174
type DropdownMenuCheckboxItemProps<T extends ValidComponent = "div"> =
175
  DropdownMenuPrimitive.DropdownMenuCheckboxItemProps<T> & {
176
    class?: string | undefined
177
    children?: JSX.Element
178
  }
179

180
const DropdownMenuCheckboxItem = <T extends ValidComponent = "div">(
181
  props: PolymorphicProps<T, DropdownMenuCheckboxItemProps<T>>
182
) => {
183
  const [local, others] = splitProps(props as DropdownMenuCheckboxItemProps, ["class", "children"])
184
  return (
185
    <DropdownMenuPrimitive.CheckboxItem
186
      class={cn(
187
        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
188
        local.class
189
      )}
190
      data-slot="dropdown-menu-checkbox-item"
191
      {...others}
192
    >
193
      <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
194
        <DropdownMenuPrimitive.ItemIndicator>
195
          <svg
196
            class="size-4"
197
            fill="none"
198
            stroke="currentColor"
199
            stroke-linecap="round"
200
            stroke-linejoin="round"
201
            stroke-width="2"
202
            viewBox="0 0 24 24"
203
            xmlns="http://www.w3.org/2000/svg"
204
          >
205
            <path d="M5 12l5 5l10 -10" />
206
          </svg>
207
        </DropdownMenuPrimitive.ItemIndicator>
208
      </span>
209
      {local.children}
210
    </DropdownMenuPrimitive.CheckboxItem>
211
  )
212
}
213

214
type DropdownMenuGroupLabelProps<T extends ValidComponent = "span"> =
215
  DropdownMenuPrimitive.DropdownMenuGroupLabelProps<T> & {
216
    class?: string | undefined
217
  }
218

219
const DropdownMenuGroupLabel = <T extends ValidComponent = "span">(
220
  props: PolymorphicProps<T, DropdownMenuGroupLabelProps<T>>
221
) => {
222
  const [local, others] = splitProps(props as DropdownMenuGroupLabelProps, ["class"])
223
  return (
224
    <DropdownMenuPrimitive.GroupLabel
225
      class={cn("px-2 py-1.5 font-semibold text-sm", local.class)}
226
      data-slot="dropdown-menu-group-label"
227
      {...others}
228
    />
229
  )
230
}
231

232
type DropdownMenuRadioGroupProps<
233
  T extends ValidComponent = "div",
234
  TValue = string
235
> = DropdownMenuPrimitive.DropdownMenuRadioGroupProps<T, TValue>
236

237
const DropdownMenuRadioGroup = <T extends ValidComponent = "div", TValue = string>(
238
  props: PolymorphicProps<T, DropdownMenuRadioGroupProps<T, TValue>>
239
) => <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
240

241
type DropdownMenuRadioItemProps<T extends ValidComponent = "div"> =
242
  DropdownMenuPrimitive.DropdownMenuRadioItemProps<T> & {
243
    class?: string | undefined
244
    children?: JSX.Element
245
  }
246

247
const DropdownMenuRadioItem = <T extends ValidComponent = "div">(
248
  props: PolymorphicProps<T, DropdownMenuRadioItemProps<T>>
249
) => {
250
  const [local, others] = splitProps(props as DropdownMenuRadioItemProps, ["class", "children"])
251
  return (
252
    <DropdownMenuPrimitive.RadioItem
253
      class={cn(
254
        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
255
        local.class
256
      )}
257
      data-slot="dropdown-menu-radio-item"
258
      {...others}
259
    >
260
      <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
261
        <DropdownMenuPrimitive.ItemIndicator>
262
          <svg
263
            class="size-2 fill-current"
264
            fill="none"
265
            stroke="currentColor"
266
            stroke-linecap="round"
267
            stroke-linejoin="round"
268
            stroke-width="2"
269
            viewBox="0 0 24 24"
270
            xmlns="http://www.w3.org/2000/svg"
271
          >
272
            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
273
          </svg>
274
        </DropdownMenuPrimitive.ItemIndicator>
275
      </span>
276
      {local.children}
277
    </DropdownMenuPrimitive.RadioItem>
278
  )
279
}
280

281
export {
282
  DropdownMenu,
283
  DropdownMenuTrigger,
284
  DropdownMenuPortal,
285
  DropdownMenuContent,
286
  DropdownMenuItem,
287
  DropdownMenuShortcut,
288
  DropdownMenuLabel,
289
  DropdownMenuSeparator,
290
  DropdownMenuSub,
291
  DropdownMenuSubTrigger,
292
  DropdownMenuSubContent,
293
  DropdownMenuCheckboxItem,
294
  DropdownMenuGroup,
295
  DropdownMenuGroupLabel,
296
  DropdownMenuRadioGroup,
297
  DropdownMenuRadioItem
298
}

Usage

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

1
<DropdownMenu>
2
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
3
  <DropdownMenuContent>
4
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
5
    <DropdownMenuSeparator />
6
    <DropdownMenuItem>Profile</DropdownMenuItem>
7
    <DropdownMenuItem>Billing</DropdownMenuItem>
8
    <DropdownMenuItem>Team</DropdownMenuItem>
9
    <DropdownMenuItem>Subscription</DropdownMenuItem>
10
  </DropdownMenuContent>
11
</DropdownMenu>

Examples

Checkboxes

import { createSignal } from "solid-js"

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

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

  return (
    <DropdownMenu>
      <DropdownMenuTrigger as={Button<"button">} variant="outline">
        Open
      </DropdownMenuTrigger>
      <DropdownMenuContent class="w-56">
        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem checked={showStatusBar()} onChange={setShowStatusBar}>
          Status Bar
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem
          checked={showActivityBar()}
          disabled
          onChange={setShowActivityBar}
        >
          Activity Bar
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={showPanel()} onChange={setShowPanel}>
          Panel
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

1
import { createSignal } from "solid-js"
2

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

13
export function DropdownMenuCheckboxes() {
14
  const [showStatusBar, setShowStatusBar] = createSignal(true)
15
  const [showActivityBar, setShowActivityBar] = createSignal(false)
16
  const [showPanel, setShowPanel] = createSignal(false)
17

18
  return (
19
    <DropdownMenu>
20
      <DropdownMenuTrigger as={Button<"button">} variant="outline">
21
        Open
22
      </DropdownMenuTrigger>
23
      <DropdownMenuContent class="w-56">
24
        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
25
        <DropdownMenuSeparator />
26
        <DropdownMenuCheckboxItem checked={showStatusBar()} onChange={setShowStatusBar}>
27
          Status Bar
28
        </DropdownMenuCheckboxItem>
29
        <DropdownMenuCheckboxItem
30
          checked={showActivityBar()}
31
          disabled
32
          onChange={setShowActivityBar}
33
        >
34
          Activity Bar
35
        </DropdownMenuCheckboxItem>
36
        <DropdownMenuCheckboxItem checked={showPanel()} onChange={setShowPanel}>
37
          Panel
38
        </DropdownMenuCheckboxItem>
39
      </DropdownMenuContent>
40
    </DropdownMenu>
41
  )
42
}

Radio Group

import { createSignal } from "solid-js"

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

export function DropdownMenuRadioGroupDemo() {
  const [position, setPosition] = createSignal("bottom")

  return (
    <DropdownMenu>
      <DropdownMenuTrigger as={Button<"button">} variant="outline">
        Open
      </DropdownMenuTrigger>
      <DropdownMenuContent class="w-56">
        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuRadioGroup onChange={setPosition} value={position()}>
          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

1
import { createSignal } from "solid-js"
2

3
import { Button } from "~/components/ui/button"
4
import {
5
  DropdownMenu,
6
  DropdownMenuContent,
7
  DropdownMenuLabel,
8
  DropdownMenuRadioGroup,
9
  DropdownMenuRadioItem,
10
  DropdownMenuSeparator,
11
  DropdownMenuTrigger
12
} from "~/components/ui/dropdown-menu"
13

14
export function DropdownMenuRadioGroupDemo() {
15
  const [position, setPosition] = createSignal("bottom")
16

17
  return (
18
    <DropdownMenu>
19
      <DropdownMenuTrigger as={Button<"button">} variant="outline">
20
        Open
21
      </DropdownMenuTrigger>
22
      <DropdownMenuContent class="w-56">
23
        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
24
        <DropdownMenuSeparator />
25
        <DropdownMenuRadioGroup onChange={setPosition} value={position()}>
26
          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
27
          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
28
          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
29
        </DropdownMenuRadioGroup>
30
      </DropdownMenuContent>
31
    </DropdownMenu>
32
  )
33
}

Dialog

This example shows how to open a dialog from a dropdown menu.

Use modal={false} on the DropdownMenu component.

1
<DropdownMenu modal={false}>
2
  <DropdownMenuTrigger as={Button<"button">} variant="outline">
3
    Actions
4
  </DropdownMenuTrigger>
5
</DropdownMenu>

import { createSignal } from "solid-js"

import { IconDots } from "~/components/icons"
import { Button } from "~/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from "~/components/ui/dialog"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger
} from "~/components/ui/dropdown-menu"
import { Field, FieldGroup, FieldLabel } from "~/components/ui/field"
import { Input } from "~/components/ui/input"
import { Label } from "~/components/ui/label"
import { Textarea } from "~/components/ui/textarea"

export function DropdownMenuDialog() {
  const [showNewDialog, setShowNewDialog] = createSignal(false)
  const [showShareDialog, setShowShareDialog] = createSignal(false)

  return (
    <>
      <DropdownMenu modal={false} placement="bottom-end">
        <DropdownMenuTrigger
          aria-label="Open menu"
          as={Button<"button">}
          size="icon-sm"
          variant="outline"
        >
          <IconDots />
        </DropdownMenuTrigger>
        <DropdownMenuContent class="w-40">
          <DropdownMenuLabel>File Actions</DropdownMenuLabel>
          <DropdownMenuGroup>
            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>New File...</DropdownMenuItem>
            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>Share...</DropdownMenuItem>
            <DropdownMenuItem disabled>Download</DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
      <Dialog onOpenChange={setShowNewDialog} open={showNewDialog()}>
        <DialogContent class="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Create New File</DialogTitle>
            <DialogDescription>
              Provide a name for your new file. Click create when you&apos;re done.
            </DialogDescription>
          </DialogHeader>
          <FieldGroup class="pb-3">
            <Field>
              <FieldLabel for="filename">File Name</FieldLabel>
              <Input id="filename" name="filename" placeholder="document.txt" />
            </Field>
          </FieldGroup>
          <DialogFooter>
            <DialogClose as={Button<"button">} variant="outline">
              Cancel
            </DialogClose>
            <Button type="submit">Create</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      <Dialog onOpenChange={setShowShareDialog} open={showShareDialog()}>
        <DialogContent class="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Share File</DialogTitle>
            <DialogDescription>
              Anyone with the link will be able to view this file.
            </DialogDescription>
          </DialogHeader>
          <FieldGroup class="py-3">
            <Field>
              <Label for="email">Email Address</Label>
              <Input
                auto-complete="off"
                id="email"
                name="email"
                placeholder="shadcn@vercel.com"
                type="email"
              />
            </Field>
            <Field>
              <FieldLabel for="message">Message (Optional)</FieldLabel>
              <Textarea id="message" name="message" placeholder="Check out this file" />
            </Field>
          </FieldGroup>
          <DialogFooter>
            <DialogClose as={Button<"button">} variant="outline">
              Cancel
            </DialogClose>
            <Button type="submit">Send Invite</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}

1
import { createSignal } from "solid-js"
2

3
import { IconDots } from "~/components/icons"
4
import { Button } from "~/components/ui/button"
5
import {
6
  Dialog,
7
  DialogClose,
8
  DialogContent,
9
  DialogDescription,
10
  DialogFooter,
11
  DialogHeader,
12
  DialogTitle
13
} from "~/components/ui/dialog"
14
import {
15
  DropdownMenu,
16
  DropdownMenuContent,
17
  DropdownMenuGroup,
18
  DropdownMenuItem,
19
  DropdownMenuLabel,
20
  DropdownMenuTrigger
21
} from "~/components/ui/dropdown-menu"
22
import { Field, FieldGroup, FieldLabel } from "~/components/ui/field"
23
import { Input } from "~/components/ui/input"
24
import { Label } from "~/components/ui/label"
25
import { Textarea } from "~/components/ui/textarea"
26

27
export function DropdownMenuDialog() {
28
  const [showNewDialog, setShowNewDialog] = createSignal(false)
29
  const [showShareDialog, setShowShareDialog] = createSignal(false)
30

31
  return (
32
    <>
33
      <DropdownMenu modal={false} placement="bottom-end">
34
        <DropdownMenuTrigger
35
          aria-label="Open menu"
36
          as={Button<"button">}
37
          size="icon-sm"
38
          variant="outline"
39
        >
40
          <IconDots />
41
        </DropdownMenuTrigger>
42
        <DropdownMenuContent class="w-40">
43
          <DropdownMenuLabel>File Actions</DropdownMenuLabel>
44
          <DropdownMenuGroup>
45
            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>New File...</DropdownMenuItem>
46
            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>Share...</DropdownMenuItem>
47
            <DropdownMenuItem disabled>Download</DropdownMenuItem>
48
          </DropdownMenuGroup>
49
        </DropdownMenuContent>
50
      </DropdownMenu>
51
      <Dialog onOpenChange={setShowNewDialog} open={showNewDialog()}>
52
        <DialogContent class="sm:max-w-[425px]">
53
          <DialogHeader>
54
            <DialogTitle>Create New File</DialogTitle>
55
            <DialogDescription>
56
              Provide a name for your new file. Click create when you&apos;re done.
57
            </DialogDescription>
58
          </DialogHeader>
59
          <FieldGroup class="pb-3">
60
            <Field>
61
              <FieldLabel for="filename">File Name</FieldLabel>
62
              <Input id="filename" name="filename" placeholder="document.txt" />
63
            </Field>
64
          </FieldGroup>
65
          <DialogFooter>
66
            <DialogClose as={Button<"button">} variant="outline">
67
              Cancel
68
            </DialogClose>
69
            <Button type="submit">Create</Button>
70
          </DialogFooter>
71
        </DialogContent>
72
      </Dialog>
73
      <Dialog onOpenChange={setShowShareDialog} open={showShareDialog()}>
74
        <DialogContent class="sm:max-w-[425px]">
75
          <DialogHeader>
76
            <DialogTitle>Share File</DialogTitle>
77
            <DialogDescription>
78
              Anyone with the link will be able to view this file.
79
            </DialogDescription>
80
          </DialogHeader>
81
          <FieldGroup class="py-3">
82
            <Field>
83
              <Label for="email">Email Address</Label>
84
              <Input
85
                auto-complete="off"
86
                id="email"
87
                name="email"
88
                placeholder="shadcn@vercel.com"
89
                type="email"
90
              />
91
            </Field>
92
            <Field>
93
              <FieldLabel for="message">Message (Optional)</FieldLabel>
94
              <Textarea id="message" name="message" placeholder="Check out this file" />
95
            </Field>
96
          </FieldGroup>
97
          <DialogFooter>
98
            <DialogClose as={Button<"button">} variant="outline">
99
              Cancel
100
            </DialogClose>
101
            <Button type="submit">Send Invite</Button>
102
          </DialogFooter>
103
        </DialogContent>
104
      </Dialog>
105
    </>
106
  )
107
}

Drawer Empty