Context menu

Same .menu as Dropdown, opened with contextmenu at the pointer. Paste the markup first. Copy src/components/ui/Place.svelte (see Popover). Prevent the browser menu on the well. Check items use aria-checked and .menu-check. One nested submenu uses the same inside-parent pattern as Dropdown (no third level). The root menu is a click point, so place() always sets top / left there; the submenu can still use CSS anchor.

Preview

Markup

<div class="context-well">
	Right click here
</div>
<div popover class="menu" role="menu" tabindex="-1">
	<button class="menu-item" type="button" role="menuitem" data-inset>
		Back <span class="menu-shortcut">⌘[</span>
	</button>
	<button class="menu-item" type="button" role="menuitem" data-inset aria-disabled="true">
		Forward <span class="menu-shortcut">⌘]</span>
	</button>
	<button class="menu-item" type="button" role="menuitem" data-inset popovertarget="more" aria-haspopup="menu" aria-expanded="false">
		More tools <span class="menu-caret"></span>
	</button>
	<div id="more" popover class="menu" role="menu" tabindex="-1" data-side="end" data-align="start">
		<button class="menu-item" type="button" role="menuitem">Save page…</button>
		<button class="menu-item" type="button" role="menuitem">Create QR code</button>
	</div>
	<hr class="menu-sep">
	<button class="menu-item" type="button" role="menuitemcheckbox" aria-checked="true">
		<span class="menu-check"></span> Show bookmarks
	</button>
</div>

Imported

<script>
	import { on_context, on_menu_toggle, menu_keydown, choose_item } from './ui/Place.svelte';
	let menu;
	let on = $state(true);
</script>

<div class="context-well" oncontextmenu={(event) => on_context(event, menu)}>
	Right click here
</div>
<div bind:this={menu} popover class="menu" role="menu" tabindex="-1" onkeydown={menu_keydown}>
	<button class="menu-item" type="button" role="menuitem" data-inset onclick={choose_item}>
		Back <span class="menu-shortcut">⌘[</span>
	</button>
	<button class="menu-item" type="button" role="menuitem" data-inset aria-disabled="true">
		Forward <span class="menu-shortcut">⌘]</span>
	</button>
	<button class="menu-item" type="button" role="menuitem" data-inset popovertarget="more" aria-haspopup="menu" aria-expanded="false">
		More tools <span class="menu-caret"></span>
	</button>
	<div id="more" popover class="menu" role="menu" tabindex="-1" data-side="end" data-align="start" ontoggle={on_menu_toggle} onkeydown={menu_keydown}>
		<button class="menu-item" type="button" role="menuitem" onclick={choose_item}>Save page…</button>
		<button class="menu-item" type="button" role="menuitem" onclick={choose_item}>Create QR code</button>
	</div>
	<hr class="menu-sep">
	<button class="menu-item" type="button" role="menuitemcheckbox" aria-checked={on} onclick={() => on = !on}>
		<span class="menu-check"></span> Show bookmarks
	</button>
</div>