@isoftdata/svelte-context-menu

Svelte ContextMenu

A Context/Dropdown menu component, filled with DropdownItems and DropdownCheckboxItems

Install

pnpm i @isoftdata/svelte-context-menu

Breaking changes

2.0.0

• Require Svelte 5
• Slots -> Snippets
• Events -> Callbacks

Props

Name	Type	Description	Default Value
id	string	The id of the context menu element.	"menu"
menuItemClickCloses	boolean	Whether clicking a menu item will close the menu.	true
placement	string	The placement of the context menu relative to the reference element.	"bottom-start"

Usage

The main way you'll interact with this component is through calling the methods below. To access these methods on the component instance, you will have to use the bind:this directive on the ContextMenu in your template, and assign it to a variable, which you can then call the methods on. See Example for more details.

Methods

• open - Opens the context menu. Arguments below.
  • event - the mouse event
  • targetId (optional) the id of an element. If supplied, the menu will be positioned relative to this element. Otherwise, it will be positioned relative to the cursor.
• close - Closes the context menu. Normally you'd close the context menu by clicking on an item within it, but this is also an option.

Callbacks

• open - Called when the menu is opened
• close - Called when the menu is closed

Example

<script lang="ts">
	import ContextMenu from '@isoftdata/svelte-context-menu'

	let cm: ContextMenu
</script>

<button
	id="target"
	class="btn btn-primary btn-block"
	on:contextmenu={e => {
		event.preventDefault()
		cm.open(e, "target")
	}}
>
	Right Click to Open Menu
</button>
<ContextMenu bind:this={cm}>
		<DropdownItem
			icon="mouse"
			onclick={() => alert("Dropdown Item Clicked!")}
		>
			Click Me!
		</DropdownItem>
	<div class="downdown-divider" />
	<h6 class="dropdown-header">Clicked {cmClicks} time(s)</h6>
</ContextMenu>