Menubar

A row of triggers, each opening a .menu popover. Paste the markup first. Copy src/components/ui/Place.svelte (see Popover). Opening one closes another (native auto popovers). With a menu open, hover or ArrowLeft / ArrowRight moves to the next trigger. One nested submenu uses the same inside-parent pattern as Dropdown (no third level). ArrowRight on the submenu trigger opens it instead of leaving the menubar.

Preview

Markup

<div class="menubar" role="menubar">
	<button class="menubar-trigger" type="button" role="menuitem" popovertarget="file" aria-haspopup="true" aria-expanded="false">File</button>
	<div id="file" popover class="menu" role="menu" tabindex="-1">
		<button class="menu-item" type="button" role="menuitem">
			New tab <span class="menu-shortcut">⌘T</span>
		</button>
		<button class="menu-item" type="button" role="menuitem" popovertarget="share" aria-haspopup="menu" aria-expanded="false">
			Share <span class="menu-caret"></span>
		</button>
		<div id="share" 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">Print…</button>
	</div>
	<button class="menubar-trigger" type="button" role="menuitem" popovertarget="edit" aria-haspopup="true" aria-expanded="false">Edit</button>
	<div id="edit" popover class="menu" role="menu" tabindex="-1">
		<button class="menu-item" type="button" role="menuitem">Undo</button>
		<button class="menu-item" type="button" role="menuitem">Redo</button>
	</div>
</div>

Imported

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

<div class="menubar" role="menubar">
	<button class="menubar-trigger" type="button" role="menuitem" popovertarget="file" aria-haspopup="true" aria-expanded="false" onmouseenter={menubar_enter}>File</button>
	<div id="file" popover class="menu" role="menu" tabindex="-1" ontoggle={on_menu_toggle} onkeydown={menu_keydown}>
		<button class="menu-item" type="button" role="menuitem" onclick={choose_item}>
			New tab <span class="menu-shortcut">⌘T</span>
		</button>
		<button class="menu-item" type="button" role="menuitem" popovertarget="share" aria-haspopup="menu" aria-expanded="false">
			Share <span class="menu-caret"></span>
		</button>
		<div id="share" 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" onclick={choose_item}>Print…</button>
	</div>
	<button class="menubar-trigger" type="button" role="menuitem" popovertarget="edit" aria-haspopup="true" aria-expanded="false" onmouseenter={menubar_enter}>Edit</button>
	<div id="edit" popover class="menu" role="menu" tabindex="-1" ontoggle={on_menu_toggle} onkeydown={menu_keydown}>
		<button class="menu-item" type="button" role="menuitem" onclick={choose_item}>Undo</button>
		<button class="menu-item" type="button" role="menuitem" onclick={choose_item}>Redo</button>
	</div>
</div>