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 closedlock- If true, keep current open statetarget- 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
Preset for Demo
Enter variant as you like
Right click HERE