Installation
pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/context-menu.jsonUsage
<script lang="ts">
import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
</script>
<ContextMenu.Root>
<ContextMenu.Trigger>Right click here</ContextMenu.Trigger>
<ContextMenu.Popup>
<ContextMenu.Item>Back</ContextMenu.Item>
<ContextMenu.Item>Forward</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.LinkItem href="/docs">Documentation</ContextMenu.LinkItem>
<ContextMenu.Separator />
<ContextMenu.Sub>
<ContextMenu.SubTrigger>More tools</ContextMenu.SubTrigger>
<ContextMenu.SubPopup>
<ContextMenu.Item>Inspect</ContextMenu.Item>
<ContextMenu.Item>View source</ContextMenu.Item>
</ContextMenu.SubPopup>
</ContextMenu.Sub>
</ContextMenu.Popup>
</ContextMenu.Root>API Reference
ContextMenu.Root
Root component. Alias for ContextMenu.Root from Shards UI.
ContextMenu.Trigger
An area that opens the menu on right click or long press. Renders a <div> element.
ContextMenu.Popup
Popup container that displays the menu content at the pointer.
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" \| "bottom" \| "left" \| "right" | "bottom" | Side of the anchor to position the popup |
align | "start" \| "center" \| "end" | "center" | Alignment relative to the anchor |
sideOffset | number | 4 | Distance from the anchor in pixels |
alignOffset | number | - | Offset along the alignment axis |
portalProps | ContextMenuPopupProps["portalProps"] | - | Props forwarded to the internal portal |
ContextMenu.Group
Groups related menu items. Alias for ContextMenu.Group from Shards UI.
ContextMenu.Item
Individual menu item.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - | Adds left padding to align with items that have icons |
variant | "default" \| "destructive" | "default" | Controls the item styling |
Using inset: When mixing items with and without icons, use inset on icon-less items to maintain alignment:
<ContextMenu.Item><PencilIcon /> Edit</ContextMenu.Item>
<ContextMenu.Item inset>Properties</ContextMenu.Item>ContextMenu.LinkItem
Link menu item for navigation. LinkItem renders a native <a> when you pass href. Styled like ContextMenu.Item.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - | Adds left padding to align with items that have icons |
variant | "default" \| "destructive" | "default" | Controls the item styling |
closeOnClick | boolean | true | Whether the menu closes when the link is clicked |
Use href for plain anchor links:
<ContextMenu.LinkItem href="/docs">Docs</ContextMenu.LinkItem>ContextMenu.CheckboxItem
Checkbox menu item.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" \| "switch" | "default" | Display style; switch shows a toggle switch indicator |
ContextMenu.RadioGroup
Groups radio menu items. Alias for ContextMenu.RadioGroup from Shards UI.
ContextMenu.RadioItem
Radio menu item. Styled wrapper for ContextMenu.RadioItem from Shards UI.
ContextMenu.GroupLabel
Label for a menu group.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - | Adds left padding to align with items that have icons |
ContextMenu.Separator
Visual separator between menu items.
ContextMenu.Shortcut
Displays keyboard shortcut text. Custom component.
ContextMenu.Sub
Submenu container. Alias for ContextMenu.Sub from Shards UI.
ContextMenu.SubTrigger
Trigger for opening a submenu.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - | Adds left padding to align with items that have icons |
ContextMenu.SubPopup
Popup for submenu content.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "start" \| "center" \| "end" | "start" | Alignment relative to the trigger |
sideOffset | number | 0 | Distance from the trigger in pixels |
alignOffset | number | -5 | Offset along the alignment axis; defaults to -5 unless align="center" |
Examples
With Link
Nested Menu
With Checkbox
With Group Label
With Icons
With Radio Group
With Switch
ContextMenu.CheckboxItem supports a variant="switch" prop that displays a decorative switch indicator instead of a checkmark. This is a purely visual variant — the component remains a checkbox item with the same functionality.