Dropdown

A .menu popover. Light dismiss and Escape come from the Popover API. Paste the markup first. Copy src/components/ui/Place.svelte (see Popover). Arrow keys move between items. One nested submenu: put a second .menu inside the parent (so auto popovers nest), data-side="end", and a .menu-caret on the trigger. Hover or ArrowRight opens it; ArrowLeft closes it (RTL flips). A third level is not supported. CSS anchor positions the panel when the browser supports it; otherwise place() sets top / left (data-place="js" forces that fallback).

Preview

Markup

<button class="button button-outline" type="button" popovertarget="account" aria-haspopup="menu">Open</button>
<div id="account" popover class="menu" role="menu" tabindex="-1" data-side="bottom" data-align="start">
	<div class="menu-label">My Account</div>
	<button class="menu-item" type="button" role="menuitem">Profile</button>
	<button class="menu-item" type="button" role="menuitem" popovertarget="invite" aria-haspopup="menu" aria-expanded="false">
		Invite users <span class="menu-caret"></span>
	</button>
	<div id="invite" popover class="menu" role="menu" tabindex="-1" data-side="end" data-align="start">
		<button class="menu-item" type="button" role="menuitem">Email</button>
		<button class="menu-item" type="button" role="menuitem">Message</button>
	</div>
	<button class="menu-item" type="button" role="menuitem" data-variant="destructive">Log out</button>
</div>

Imported

<script>
	import { on_menu_toggle, menu_keydown, choose_item } from './ui/Place.svelte';
</script>

<button class="button button-outline" type="button" popovertarget="account" aria-haspopup="menu">Open</button>
<div id="account" popover class="menu" role="menu" tabindex="-1" data-side="bottom" data-align="start" ontoggle={on_menu_toggle} onkeydown={menu_keydown}>
	<div class="menu-label">My Account</div>
	<button class="menu-item" type="button" role="menuitem" onclick={choose_item}>Profile</button>
	<button class="menu-item" type="button" role="menuitem" popovertarget="invite" aria-haspopup="menu" aria-expanded="false">
		Invite users <span class="menu-caret"></span>
	</button>
	<div id="invite" 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}>Email</button>
		<button class="menu-item" type="button" role="menuitem" onclick={choose_item}>Message</button>
	</div>
	<button class="menu-item" type="button" role="menuitem" data-variant="destructive" onclick={choose_item}>Log out</button>
</div>