Navigation Core Stable
ContextMenu
A menu that opens at the pointer on right-click, sharing DropdownMenu's item, submenu and keyboard behaviour but anchored to a virtual point instead of a trigger element.
Preview
svelte
<script lang="ts">
import {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
} from "fancy-ui-svelte";
</script>
<ContextMenu>
<ContextMenuTrigger>
<div
class="border-border text-muted-foreground flex h-[140px] w-full items-center justify-center rounded-[10px] border border-dashed text-[13px]"
>
Right-click here
</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem onSelect={() => console.log("back")}>Previous</ContextMenuItem>
<ContextMenuItem onSelect={() => console.log("forward")}>Next</ContextMenuItem>
<ContextMenuItem onSelect={() => console.log("reload")}>Reload</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem onSelect={() => console.log("save")}>Save page…</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>Installation
pnpm add fancy-ui-svelte
import { ContextMenu } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { ContextMenu } from 'fancy-ui-svelte';
</script>
<ContextMenu />Examples
Basic Usage
svelte
<script lang="ts">
import {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
} from "$lib/fancy-ui/context-menu";
</script>
<ContextMenu>
<ContextMenuTrigger>
<div
class="border-border text-muted-foreground flex h-[140px] w-full items-center justify-center rounded-[10px] border border-dashed text-[13px]"
>
Right-click here
</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem onSelect={() => console.log("back")}>Previous</ContextMenuItem>
<ContextMenuItem onSelect={() => console.log("forward")}>Next</ContextMenuItem>
<ContextMenuItem onSelect={() => console.log("reload")}>Reload</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem onSelect={() => console.log("save")}>Save page…</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>With Submenu
A nested submenu inside a context menu, using the same Sub primitives as DropdownMenu.
svelte
<script lang="ts">
import {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuSub,
ContextMenuSubTrigger,
ContextMenuSubContent,
} from "$lib/fancy-ui/context-menu";
</script>
<ContextMenu>
<ContextMenuTrigger>
<div
class="border-border text-muted-foreground flex h-[140px] w-full items-center justify-center rounded-[10px] border border-dashed text-[13px]"
>
Right-click here
</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem onSelect={() => console.log("back")}>Previous</ContextMenuItem>
<ContextMenuItem onSelect={() => console.log("reload")}>Reload</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuSub>
<ContextMenuSubTrigger>More tools</ContextMenuSubTrigger>
<ContextMenuSubContent>
<ContextMenuItem onSelect={() => console.log("screenshot")}>Screenshot</ContextMenuItem>
<ContextMenuItem onSelect={() => console.log("inspect")}>Inspect</ContextMenuItem>
</ContextMenuSubContent>
</ContextMenuSub>
</ContextMenuContent>
</ContextMenu>Disabled Items
Disabled rows are skipped by keyboard navigation and inert to click.
svelte
<script lang="ts">
import {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
} from "$lib/fancy-ui/context-menu";
</script>
<ContextMenu>
<ContextMenuTrigger>
<div
class="border-border text-muted-foreground flex h-[140px] w-full items-center justify-center rounded-[10px] border border-dashed text-[13px]"
>
Right-click here
</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem onSelect={() => console.log("back")}>Previous</ContextMenuItem>
<ContextMenuItem disabled onSelect={() => console.log("forward")}>Next</ContextMenuItem>
<ContextMenuItem onSelect={() => console.log("reload")}>Reload</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Whether the menu is open. Bindable |
onOpenChange | (open: boolean) => void | - | Called whenever the menu opens or closes, however it happened |
side | "top" | "bottom" | "left" | "right" | "bottom" | Side of the pointer to place the menu on. Flips when it would overflow |
align | "start" | "center" | "end" | "start" | Alignment along the pointer's cross axis |
offset | number | 2 | Gap in pixels between the pointer and the menu |
loop | boolean | true | Whether arrow-key navigation wraps at the ends |
Slots
| Slot | Description |
|---|---|
children | The ContextMenuTrigger and ContextMenuContent |
Links
Related components
Br
Breadcrumb
A data-driven trail of links with automatic truncation, a decorative separator, and the current page marked for assistive tech.
Navigation Stable
Co
CommandMenu
A modal search palette over a flat vocabulary of items — grouped results, diacritic-insensitive filtering, match highlighting, and full keyboard navigation with focus that never leaves the search field.
Navigation Stable
Do
Dock
Icon dock where each item magnifies smoothly as the cursor approaches, sharing pointer position via Svelte context so every DockIcon scales by proximity within a configurable magnification and distance range
Navigation Stable