Context Menu
A menu shown on right-click, anchored to the pointer.
Right-click here
<script lang="ts">
import {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuLabel
} from "$lib/components/ui/context-menu";
</script>
<ContextMenu>
<ContextMenuTrigger
class="flex h-32 w-full max-w-sm items-center justify-center rounded-3xl border border-dashed border-(--text)/12 text-sm tracking-[-0.39px] text-(--text)/56"
>
Right-click here
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuLabel>Actions</ContextMenuLabel>
<ContextMenuItem>Back</ContextMenuItem>
<ContextMenuItem>Reload</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem variant="destructive">Delete</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the context-menu source from the registry into $lib/components/ui/context-menu.
Usage
<script lang="ts">
import {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator
} from '$lib/components/ui/context-menu';
</script>
<ContextMenu>
<ContextMenuTrigger>Right-click here</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>Back</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem variant="destructive">Delete</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>