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" | | aria-label | string | Accessible name for the menu. Set this or aria-labelledby so screen readers can announce what the menu is. | undefined | | aria-labelledby | string | Id of an element that labels the menu, as an alternative to aria-label. | undefined |

Accessibility

This component follows the ARIA menu pattern:

• The menu opens with focus on its first (non-disabled) item, and supports arrow-key navigation between items (ArrowUp/ArrowDown wrap around, Home/End jump to the first/last item).
• Escape and Tab close the menu; closing via the keyboard returns focus to whichever element opened the menu.
• DropdownItem renders with role="menuitem", and DropdownCheckboxItem renders with role="menuitemcheckbox" and aria-checked reflecting its checked state.
• Give the menu an accessible name via aria-label or aria-labelledby, since a role="menu" element needs one to be identifiable to screen reader users.

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.
• toggle - same args as open, but will close the menu if it's already open

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>