Navigation menu

Site chrome: triggers open a wide popover of links, plus plain .nav-menu-link items. Paste the markup first. Copy src/components/ui/Place.svelte (see Popover). Opening one closes another (native auto popovers). With a panel open, hover moves to the next trigger. Not a command palette. Nested submenus are a .menu pattern (see Dropdown), not a second overlay on this mega-menu.

Preview

Markup

<nav class="nav-menu" aria-label="Site">
	<button class="nav-menu-trigger" type="button" popovertarget="getting-started" aria-expanded="false">Getting started</button>
	<div id="getting-started" popover class="popover nav-menu-panel" data-side="bottom" data-align="start">
		<div class="nav-menu-grid">
			<a class="nav-menu-item" href="/install">
				<span class="nav-menu-item-title">Install</span>
				<p>Copy two CSS files and paste a snippet.</p>
			</a>
			<a class="nav-menu-item" href="/theming">
				<span class="nav-menu-item-title">Theming</span>
				<p>Color, radius, and the system font stack.</p>
			</a>
		</div>
	</div>
	<button class="nav-menu-trigger" type="button" popovertarget="components" aria-expanded="false">Components</button>
	<div id="components" popover class="popover nav-menu-panel" data-side="bottom" data-align="start">
		<div class="nav-menu-grid">
			<a class="nav-menu-item" href="/components/button">
				<span class="nav-menu-item-title">Button</span>
				<p>Default, outline, ghost, and the rest of the first-wave variants.</p>
			</a>
		</div>
	</div>
	<a class="nav-menu-link" href="/">Docs</a>
</nav>

Imported

<script>
	import { on_toggle, nav_enter } from './ui/Place.svelte';
</script>

<nav class="nav-menu" aria-label="Site">
	<button class="nav-menu-trigger" type="button" popovertarget="getting-started" aria-expanded="false" onmouseenter={nav_enter}>Getting started</button>
	<div id="getting-started" popover class="popover nav-menu-panel" data-side="bottom" data-align="start" ontoggle={on_toggle}>
		<div class="nav-menu-grid">
			<a class="nav-menu-item" href="/install">
				<span class="nav-menu-item-title">Install</span>
				<p>Copy two CSS files and paste a snippet.</p>
			</a>
			<a class="nav-menu-item" href="/theming">
				<span class="nav-menu-item-title">Theming</span>
				<p>Color, radius, and the system font stack.</p>
			</a>
		</div>
	</div>
	<button class="nav-menu-trigger" type="button" popovertarget="components" aria-expanded="false" onmouseenter={nav_enter}>Components</button>
	<div id="components" popover class="popover nav-menu-panel" data-side="bottom" data-align="start" ontoggle={on_toggle}>
		<div class="nav-menu-grid">
			<a class="nav-menu-item" href="/components/button">
				<span class="nav-menu-item-title">Button</span>
				<p>Default, outline, ghost, and the rest of the first-wave variants.</p>
			</a>
		</div>
	</div>
	<a class="nav-menu-link" href="/">Docs</a>
</nav>