Context Menu

A right-click menu of actions, sharing the dropdown menu's item set.

Right-click or tap here

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add context-menu

Usage

Import and compose with Root, Trigger, Content, and Item:

import * as ContextMenu from '$lib/sivir/components/context-menu';

<ContextMenu.Root>
  <ContextMenu.Trigger>
    <div>Right-click me</div>
  </ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item callback={handleAction}>Action</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu.Root>

Examples

Right-click each target. Menus remain simple, with different action sets.

File actions

Right-click a file

Image actions

Right-click an image

Task actions

Right-click a task

Anatomy

ContextMenu.Root - Provides context menu state.

ContextMenu.Content - Renders the menu surface.

ContextMenu.CheckboxItem - Renders a checkable menu item.

ContextMenu.Item - Renders a menu action.

ContextMenu.Separator - Separates menu items.

ContextMenu.SubContent - Renders a submenu surface.

ContextMenu.SubTrigger - Opens a submenu.

ContextMenu.Sub - Provides submenu state.

ContextMenu.Trigger - Defines the context menu target.