UI Elements

ContextMenu

A popup menu that appears when right-clicking.

Right click HERE

Anatomy

The class attribute values represent part names. Other attributes represent their corresponding props.

Svelte
<nav class="whole" bind:this={element}>
  {children}
</nav>

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface ContextMenuProps {
  children: Snippet<[string]>; // Snippet<[variant]>
  open?: boolean; // bindable (false); to observe state, not to control
  lock?: boolean; // bindable (false)
  target?: HTMLElement;
  element?: HTMLElement; // bindable
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
}

Additional Props

  • open - Indicates whether the context menu is open or closed
  • lock - If true, keep current open state
  • target - Specify if show the context menu only on the element

Styling

To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-context-menu

Exports

Types

TypeScript
type ContextMenuReqdProps = "children";
type ContextMenuBindProps = "open" | "lock" | "variant" | "element";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Right click HERE

With Interactive Variant