Context Menu - Zaidan

Zaidan

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

Installation

CLI

npx shadcn@latest add @zaidan/context-menu

pnpx shadcn add @zaidan/context-menu

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

bunx shadcn@latest add @zaidan/context-menu

Manual

Copy and paste the following code into your project.

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

8
type ContextMenuProps<T extends ValidComponent = "div"> = PolymorphicProps<
9
  T,
10
  ContextMenuPrimitive.ContextMenuRootProps
11
> &
12
  Pick<ComponentProps<T>, "class">;
13

14
const ContextMenu = <T extends ValidComponent = "div">(props: ContextMenuProps<T>) => {
15
  return <ContextMenuPrimitive.Root {...props} />;
16
};
17

18
type ContextMenuTriggerProps<T extends ValidComponent = "div"> = PolymorphicProps<
19
  T,
20
  ContextMenuPrimitive.ContextMenuTriggerProps<T>
21
> & {
22
  class?: string | undefined;
23
};
24

25
const ContextMenuTrigger = <T extends ValidComponent = "div">(
26
  props: ContextMenuTriggerProps<T>,
27
) => {
28
  const [local, others] = splitProps(props as ContextMenuTriggerProps, ["class"]);
29
  return (
30
    <ContextMenuPrimitive.Trigger
31
      class={cn("z-context-menu-trigger select-none", local.class)}
32
      data-slot="context-menu-trigger"
33
      {...others}
34
    />
35
  );
36
};
37

38
type ContextMenuPortalProps = ContextMenuPrimitive.ContextMenuPortalProps;
39

40
const ContextMenuPortal = (props: ContextMenuPortalProps) => {
41
  return <ContextMenuPrimitive.Portal {...props} />;
42
};
43

44
type ContextMenuContentProps<T extends ValidComponent = "div"> = PolymorphicProps<
45
  T,
46
  ContextMenuPrimitive.ContextMenuContentProps<T>
47
> & {
48
  class?: string | undefined;
49
};
50

51
const ContextMenuContent = <T extends ValidComponent = "div">(
52
  props: ContextMenuContentProps<T>,
53
) => {
54
  const [local, others] = splitProps(props as ContextMenuContentProps, ["class"]);
55
  return (
56
    <ContextMenuPrimitive.Portal>
57
      <ContextMenuPrimitive.Content
58
        class={cn(
59
          "z-50 z-context-menu-content z-menu-target max-h-(--kb-popper-available-height) origin-(--kb-menu-content-transform-origin) overflow-y-auto overflow-x-hidden outline-none",
60
          local.class,
61
        )}
62
        data-slot="context-menu-content"
63
        {...others}
64
      />
65
    </ContextMenuPrimitive.Portal>
66
  );
67
};
68

69
type ContextMenuGroupProps<T extends ValidComponent = "div"> = PolymorphicProps<
70
  T,
71
  ContextMenuPrimitive.ContextMenuGroupProps<T>
72
> & {
73
  class?: string | undefined;
74
};
75

76
const ContextMenuGroup = <T extends ValidComponent = "div">(props: ContextMenuGroupProps<T>) => {
77
  const [local, others] = splitProps(props as ContextMenuGroupProps, ["class"]);
78
  return (
79
    <ContextMenuPrimitive.Group class={local.class} data-slot="context-menu-group" {...others} />
80
  );
81
};
82

83
type ContextMenuLabelProps<T extends ValidComponent = "div"> = PolymorphicProps<
84
  T,
85
  ContextMenuPrimitive.ContextMenuGroupLabelProps<T>
86
> & {
87
  class?: string | undefined;
88
  inset?: boolean;
89
};
90

91
const ContextMenuLabel = <T extends ValidComponent = "div">(props: ContextMenuLabelProps<T>) => {
92
  const [local, others] = splitProps(props as ContextMenuLabelProps, ["class", "inset"]);
93
  return (
94
    <ContextMenuPrimitive.GroupLabel
95
      class={cn("z-context-menu-label data-inset:pl-8", local.class)}
96
      data-slot="context-menu-label"
97
      data-inset={local.inset}
98
      {...others}
99
    />
100
  );
101
};
102

103
type ContextMenuItemProps<T extends ValidComponent = "div"> = PolymorphicProps<
104
  T,
105
  ContextMenuPrimitive.ContextMenuItemProps<T>
106
> & {
107
  class?: string | undefined;
108
  inset?: boolean;
109
  variant?: "default" | "destructive";
110
};
111

112
const ContextMenuItem = <T extends ValidComponent = "div">(props: ContextMenuItemProps<T>) => {
113
  const [local, others] = splitProps(props as ContextMenuItemProps, ["class", "inset", "variant"]);
114
  return (
115
    <ContextMenuPrimitive.Item
116
      class={cn(
117
        "group/context-menu-item relative z-context-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",
118
        local.class,
119
      )}
120
      data-slot="context-menu-item"
121
      data-inset={local.inset}
122
      data-variant={local.variant ?? "default"}
123
      {...others}
124
    />
125
  );
126
};
127

128
type ContextMenuSubProps = ContextMenuPrimitive.ContextMenuSubProps;
129

130
const ContextMenuSub = (props: ContextMenuSubProps) => {
131
  return <ContextMenuPrimitive.Sub {...props} />;
132
};
133

134
type ContextMenuSubTriggerProps<T extends ValidComponent = "div"> = PolymorphicProps<
135
  T,
136
  ContextMenuPrimitive.ContextMenuSubTriggerProps<T>
137
> & {
138
  class?: string | undefined;
139
  children?: JSX.Element;
140
  inset?: boolean;
141
};
142

143
const ContextMenuSubTrigger = <T extends ValidComponent = "div">(
144
  props: ContextMenuSubTriggerProps<T>,
145
) => {
146
  const [local, others] = splitProps(props as ContextMenuSubTriggerProps, [
147
    "class",
148
    "children",
149
    "inset",
150
  ]);
151
  return (
152
    <ContextMenuPrimitive.SubTrigger
153
      class={cn(
154
        "z-context-menu-sub-trigger flex cursor-default select-none items-center outline-hidden data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
155
        local.class,
156
      )}
157
      data-slot="context-menu-sub-trigger"
158
      data-inset={local.inset}
159
      {...others}
160
    >
161
      {local.children}
162
      <ChevronRight class="ml-auto" />
163
    </ContextMenuPrimitive.SubTrigger>
164
  );
165
};
166

167
type ContextMenuSubContentProps<T extends ValidComponent = "div"> = PolymorphicProps<
168
  T,
169
  ContextMenuPrimitive.ContextMenuSubContentProps<T>
170
> & {
171
  class?: string | undefined;
172
};
173

174
const ContextMenuSubContent = <T extends ValidComponent = "div">(
175
  props: ContextMenuSubContentProps<T>,
176
) => {
177
  const [local, others] = splitProps(props as ContextMenuSubContentProps, ["class"]);
178
  return (
179
    <ContextMenuPrimitive.Portal>
180
      <ContextMenuPrimitive.SubContent
181
        class={cn(
182
          "z-50 z-context-menu-content z-context-menu-subcontent z-menu-target max-h-(--kb-popper-available-height) origin-(--kb-menu-content-transform-origin) overflow-y-auto overflow-x-hidden outline-none",
183
          local.class,
184
        )}
185
        data-slot="context-menu-sub-content"
186
        {...others}
187
      />
188
    </ContextMenuPrimitive.Portal>
189
  );
190
};
191

192
type ContextMenuCheckboxItemProps<T extends ValidComponent = "div"> = PolymorphicProps<
193
  T,
194
  ContextMenuPrimitive.ContextMenuCheckboxItemProps<T>
195
> & {
196
  class?: string | undefined;
197
  children?: JSX.Element;
198
};
199

200
const ContextMenuCheckboxItem = <T extends ValidComponent = "div">(
201
  props: ContextMenuCheckboxItemProps<T>,
202
) => {
203
  const [local, others] = splitProps(props as ContextMenuCheckboxItemProps, ["class", "children"]);
204
  return (
205
    <ContextMenuPrimitive.CheckboxItem
206
      class={cn(
207
        "relative z-context-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",
208
        local.class,
209
      )}
210
      data-slot="context-menu-checkbox-item"
211
      {...others}
212
    >
213
      <span class="pointer-events-none z-context-menu-item-indicator">
214
        <ContextMenuPrimitive.ItemIndicator>
215
          <Check />
216
        </ContextMenuPrimitive.ItemIndicator>
217
      </span>
218
      {local.children}
219
    </ContextMenuPrimitive.CheckboxItem>
220
  );
221
};
222

223
type ContextMenuRadioGroupProps<T extends ValidComponent = "div"> = PolymorphicProps<
224
  T,
225
  ContextMenuPrimitive.ContextMenuRadioGroupProps<T>
226
> & {
227
  class?: string | undefined;
228
};
229

230
const ContextMenuRadioGroup = <T extends ValidComponent = "div">(
231
  props: ContextMenuRadioGroupProps<T>,
232
) => {
233
  const [local, others] = splitProps(props as ContextMenuRadioGroupProps, ["class"]);
234
  return (
235
    <ContextMenuPrimitive.RadioGroup
236
      class={local.class}
237
      data-slot="context-menu-radio-group"
238
      {...others}
239
    />
240
  );
241
};
242

243
type ContextMenuRadioItemProps<T extends ValidComponent = "div"> = PolymorphicProps<
244
  T,
245
  ContextMenuPrimitive.ContextMenuRadioItemProps<T>
246
> & {
247
  class?: string | undefined;
248
  children?: JSX.Element;
249
};
250

251
const ContextMenuRadioItem = <T extends ValidComponent = "div">(
252
  props: ContextMenuRadioItemProps<T>,
253
) => {
254
  const [local, others] = splitProps(props as ContextMenuRadioItemProps, ["class", "children"]);
255
  return (
256
    <ContextMenuPrimitive.RadioItem
257
      class={cn(
258
        "relative z-context-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",
259
        local.class,
260
      )}
261
      data-slot="context-menu-radio-item"
262
      {...others}
263
    >
264
      <span class="pointer-events-none z-context-menu-item-indicator">
265
        <ContextMenuPrimitive.ItemIndicator>
266
          <Check />
267
        </ContextMenuPrimitive.ItemIndicator>
268
      </span>
269
      {local.children}
270
    </ContextMenuPrimitive.RadioItem>
271
  );
272
};
273

274
type ContextMenuSeparatorProps<T extends ValidComponent = "hr"> = PolymorphicProps<
275
  T,
276
  ContextMenuPrimitive.ContextMenuSeparatorProps<T>
277
> & {
278
  class?: string | undefined;
279
};
280

281
const ContextMenuSeparator = <T extends ValidComponent = "hr">(
282
  props: ContextMenuSeparatorProps<T>,
283
) => {
284
  const [local, others] = splitProps(props as ContextMenuSeparatorProps, ["class"]);
285
  return (
286
    <ContextMenuPrimitive.Separator
287
      class={cn("z-context-menu-separator", local.class)}
288
      data-slot="context-menu-separator"
289
      {...others}
290
    />
291
  );
292
};
293

294
type ContextMenuShortcutProps = ComponentProps<"span"> & {
295
  class?: string | undefined;
296
};
297

298
const ContextMenuShortcut = (props: ContextMenuShortcutProps) => {
299
  const [local, others] = splitProps(props, ["class"]);
300
  return (
301
    <span
302
      class={cn("z-context-menu-shortcut", local.class)}
303
      data-slot="context-menu-shortcut"
304
      {...others}
305
    />
306
  );
307
};
308

309
export {
310
  ContextMenu,
311
  ContextMenuTrigger,
312
  ContextMenuContent,
313
  ContextMenuItem,
314
  ContextMenuCheckboxItem,
315
  ContextMenuRadioItem,
316
  ContextMenuLabel,
317
  ContextMenuSeparator,
318
  ContextMenuShortcut,
319
  ContextMenuGroup,
320
  ContextMenuPortal,
321
  ContextMenuSub,
322
  ContextMenuSubContent,
323
  ContextMenuSubTrigger,
324
  ContextMenuRadioGroup,
325
};

Examples

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

Basic

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuTrigger,
} from "~/components/ui/context-menu";

function ContextMenuBasic() {
  return (
    <Example title="Basic">
      <ContextMenu>
        <ContextMenuTrigger class="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
          Right click here
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuItem>Back</ContextMenuItem>
            <ContextMenuItem disabled>Forward</ContextMenuItem>
            <ContextMenuItem>Reload</ContextMenuItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
    </Example>
  );
}

With Sides

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuTrigger,
} from "~/components/ui/context-menu";

function ContextMenuWithSides() {
  return (
    <Example title="With Sides">
      <div class="grid grid-cols-2 gap-6">
        <ContextMenu placement="top">
          <ContextMenuTrigger class="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
            Right click (top)
          </ContextMenuTrigger>
          <ContextMenuContent>
            <ContextMenuGroup>
              <ContextMenuItem>Back</ContextMenuItem>
              <ContextMenuItem>Forward</ContextMenuItem>
              <ContextMenuItem>Reload</ContextMenuItem>
            </ContextMenuGroup>
          </ContextMenuContent>
        </ContextMenu>
        <ContextMenu placement="right">
          <ContextMenuTrigger class="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
            Right click (right)
          </ContextMenuTrigger>
          <ContextMenuContent>
            <ContextMenuGroup>
              <ContextMenuItem>Back</ContextMenuItem>
              <ContextMenuItem>Forward</ContextMenuItem>
              <ContextMenuItem>Reload</ContextMenuItem>
            </ContextMenuGroup>
          </ContextMenuContent>
        </ContextMenu>
        <ContextMenu placement="bottom">
          <ContextMenuTrigger class="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
            Right click (bottom)
          </ContextMenuTrigger>
          <ContextMenuContent>
            <ContextMenuGroup>
              <ContextMenuItem>Back</ContextMenuItem>
              <ContextMenuItem>Forward</ContextMenuItem>
              <ContextMenuItem>Reload</ContextMenuItem>
            </ContextMenuGroup>
          </ContextMenuContent>
        </ContextMenu>
        <ContextMenu placement="left">
          <ContextMenuTrigger class="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
            Right click (left)
          </ContextMenuTrigger>
          <ContextMenuContent>
            <ContextMenuGroup>
              <ContextMenuItem>Back</ContextMenuItem>
              <ContextMenuItem>Forward</ContextMenuItem>
              <ContextMenuItem>Reload</ContextMenuItem>
            </ContextMenuGroup>
          </ContextMenuContent>
        </ContextMenu>
      </div>
    </Example>
  );
}

With Icons

import {
  Archive,
  ClipboardPaste,
  Copy,
  Scissors,
  Trash,
} from "lucide-solid";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "~/components/ui/context-menu";

function ContextMenuWithIcons() {
  return (
    <Example title="With Icons">
      <ContextMenu>
        <ContextMenuTrigger class="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
          Right click here
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuItem>
              <Copy />
              Copy
            </ContextMenuItem>
            <ContextMenuItem>
              <Scissors />
              Cut
            </ContextMenuItem>
            <ContextMenuItem>
              <ClipboardPaste />
              Paste
            </ContextMenuItem>
          </ContextMenuGroup>
          <ContextMenuSeparator />
          <ContextMenuGroup>
            <ContextMenuItem variant="destructive">
              <Trash />
              Delete
            </ContextMenuItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
    </Example>
  );
}

With Shortcuts

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "~/components/ui/context-menu";

function ContextMenuWithShortcuts() {
  return (
    <Example title="With Shortcuts">
      <ContextMenu>
        <ContextMenuTrigger class="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
          Right click here
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuItem>
              Back
              <ContextMenuShortcut>⌘[</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem disabled>
              Forward
              <ContextMenuShortcut>⌘]</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem>
              Reload
              <ContextMenuShortcut>⌘R</ContextMenuShortcut>
            </ContextMenuItem>
          </ContextMenuGroup>
          <ContextMenuSeparator />
          <ContextMenuGroup>
            <ContextMenuItem>
              Save
              <ContextMenuShortcut>⌘S</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem>
              Save As...
              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
            </ContextMenuItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
    </Example>
  );
}

With Submenu

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "~/components/ui/context-menu";

function ContextMenuWithSubmenu() {
  return (
    <Example title="With Submenu">
      <ContextMenu>
        <ContextMenuTrigger class="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
          Right click here
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuItem>
              Copy
              <ContextMenuShortcut>⌘C</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem>
              Cut
              <ContextMenuShortcut>⌘X</ContextMenuShortcut>
            </ContextMenuItem>
          </ContextMenuGroup>
          <ContextMenuSub>
            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
            <ContextMenuSubContent>
              <ContextMenuGroup>
                <ContextMenuItem>Save Page...</ContextMenuItem>
                <ContextMenuItem>Create Shortcut...</ContextMenuItem>
                <ContextMenuItem>Name Window...</ContextMenuItem>
              </ContextMenuGroup>
              <ContextMenuSeparator />
              <ContextMenuGroup>
                <ContextMenuItem>Developer Tools</ContextMenuItem>
              </ContextMenuGroup>
              <ContextMenuSeparator />
              <ContextMenuGroup>
                <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
              </ContextMenuGroup>
            </ContextMenuSubContent>
          </ContextMenuSub>
        </ContextMenuContent>
      </ContextMenu>
    </Example>
  );
}

With Groups, Labels & Separators

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "~/components/ui/context-menu";

function ContextMenuWithGroups() {
  return (
    <Example title="With Groups, Labels & Separators">
      <ContextMenu>
        <ContextMenuTrigger class="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
          Right click here
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuLabel>File</ContextMenuLabel>
            <ContextMenuItem>
              New File
              <ContextMenuShortcut>⌘N</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem>
              Open File
              <ContextMenuShortcut>⌘O</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem>
              Save
              <ContextMenuShortcut>⌘S</ContextMenuShortcut>
            </ContextMenuItem>
          </ContextMenuGroup>
          <ContextMenuSeparator />
          <ContextMenuGroup>
            <ContextMenuLabel>Edit</ContextMenuLabel>
            <ContextMenuItem>
              Undo
              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem>
              Redo
              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>
            </ContextMenuItem>
          </ContextMenuGroup>
          <ContextMenuSeparator />
          <ContextMenuGroup>
            <ContextMenuItem>
              Cut
              <ContextMenuShortcut>⌘X</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem>
              Copy
              <ContextMenuShortcut>⌘C</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem>
              Paste
              <ContextMenuShortcut>⌘V</ContextMenuShortcut>
            </ContextMenuItem>
          </ContextMenuGroup>
          <ContextMenuSeparator />
          <ContextMenuGroup>
            <ContextMenuItem variant="destructive">
              Delete
              <ContextMenuShortcut>⌫</ContextMenuShortcut>
            </ContextMenuItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
    </Example>
  );
}

With Checkboxes

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuTrigger,
} from "~/components/ui/context-menu";

function ContextMenuWithCheckboxes() {
  return (
    <Example title="With Checkboxes">
      <ContextMenu>
        <ContextMenuTrigger class="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
          Right click here
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuCheckboxItem defaultChecked>Show Bookmarks Bar</ContextMenuCheckboxItem>
            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
            <ContextMenuCheckboxItem defaultChecked>Show Developer Tools</ContextMenuCheckboxItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
    </Example>
  );
}

With Radio Group

import { createSignal } from "solid-js";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "~/components/ui/context-menu";

function ContextMenuWithRadio() {
  const [user, setUser] = createSignal("pedro");
  const [theme, setTheme] = createSignal("light");

  return (
    <Example title="With Radio Group">
      <ContextMenu>
        <ContextMenuTrigger class="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
          Right click here
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuLabel>People</ContextMenuLabel>
            <ContextMenuRadioGroup value={user()} onChange={setUser}>
              <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
              <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
            </ContextMenuRadioGroup>
          </ContextMenuGroup>
          <ContextMenuSeparator />
          <ContextMenuGroup>
            <ContextMenuLabel>Theme</ContextMenuLabel>
            <ContextMenuRadioGroup value={theme()} onChange={setTheme}>
              <ContextMenuRadioItem value="light">Light</ContextMenuRadioItem>
              <ContextMenuRadioItem value="dark">Dark</ContextMenuRadioItem>
              <ContextMenuRadioItem value="system">System</ContextMenuRadioItem>
            </ContextMenuRadioGroup>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
    </Example>
  );
}

With Destructive Items

import { Archive, Pencil, Share, Trash } from "lucide-solid";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "~/components/ui/context-menu";

function ContextMenuWithDestructive() {
  return (
    <Example title="With Destructive Items">
      <ContextMenu>
        <ContextMenuTrigger class="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
          Right click here
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuItem>
              <Pencil />
              Edit
            </ContextMenuItem>
            <ContextMenuItem>
              <Share />
              Share
            </ContextMenuItem>
          </ContextMenuGroup>
          <ContextMenuSeparator />
          <ContextMenuGroup>
            <ContextMenuItem>
              <Archive />
              Archive
            </ContextMenuItem>
            <ContextMenuItem variant="destructive">
              <Trash />
              Delete
            </ContextMenuItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
    </Example>
  );
}

In Dialog

import { ClipboardPaste, Copy, Scissors, Trash } from "lucide-solid";
import { Button } from "~/components/ui/button";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "~/components/ui/context-menu";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "~/components/ui/dialog";

function ContextMenuInDialog() {
  return (
    <Example title="In Dialog">
      <Dialog>
        <DialogTrigger as={Button} variant="outline">
          Open Dialog
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Context Menu Example</DialogTitle>
            <DialogDescription>
              Right click on the area below to see the context menu.
            </DialogDescription>
          </DialogHeader>
          <ContextMenu>
            <ContextMenuTrigger class="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
              Right click here
            </ContextMenuTrigger>
            <ContextMenuContent>
              <ContextMenuGroup>
                <ContextMenuItem>
                  <Copy />
                  Copy
                </ContextMenuItem>
                <ContextMenuItem>
                  <Scissors />
                  Cut
                </ContextMenuItem>
                <ContextMenuItem>
                  <ClipboardPaste />
                  Paste
                </ContextMenuItem>
              </ContextMenuGroup>
              <ContextMenuSeparator />
              <ContextMenuSub>
                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>
                <ContextMenuSubContent>
                  <ContextMenuGroup>
                    <ContextMenuItem>Save Page...</ContextMenuItem>
                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>
                    <ContextMenuItem>Name Window...</ContextMenuItem>
                  </ContextMenuGroup>
                  <ContextMenuSeparator />
                  <ContextMenuGroup>
                    <ContextMenuItem>Developer Tools</ContextMenuItem>
                  </ContextMenuGroup>
                </ContextMenuSubContent>
              </ContextMenuSub>
              <ContextMenuSeparator />
              <ContextMenuGroup>
                <ContextMenuItem variant="destructive">
                  <Trash />
                  Delete
                </ContextMenuItem>
              </ContextMenuGroup>
            </ContextMenuContent>
          </ContextMenu>
        </DialogContent>
      </Dialog>
    </Example>
  );
}

Preview Docs

Build your own Zaidan

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