Section Nav

A vertical in-page section navigation. Each items entry is { href, label }. The active item is detected by comparing the current route (page.url.pathname from $app/state) against each href and is marked with aria-current="page". Entries wear the shared navItemClass treatment, so a section reads as the same control as a Sidebar row rather than a second, unrelated menu.

Sections of a page

Entries wear the same navItemClass treatment a Sidebar row does, so an in-page section and an app destination read as one control rather than two unrelated menus. Which entry is current is worked out from the route — including the hash — rather than passed in, and is marked with aria-current. The links below are real: they scroll this page.

Store

What customers see at checkout and on receipts.

Payouts

When settled funds leave the account.

Notifications

Labels are never text-muted: a navigable destination is not secondary text, and a dimmed label reads as a disabled control.

<div class="flex gap-8">
	<SectionNav {items} />
	<div class="text-muted min-w-0 flex-1 space-y-6 text-sm">
		<section id="store">
			<h4 class="text-foreground font-medium">Store</h4>
			<p>What customers see at checkout and on receipts.</p>
		</section>
		<section id="payouts">
			<h4 class="text-foreground font-medium">Payouts</h4>
			<p>When settled funds leave the account.</p>
		</section>
		<section id="notifications">
			<h4 class="text-foreground font-medium">Notifications</h4>
			<p>
				Labels are never <code>text-muted</code>: a navigable destination is not
				secondary text, and a dimmed label reads as a disabled control.
			</p>
		</section>
	</div>
</div>

API

Prop	Type	Default	Description
`items`	`Array<{href: string, label: string}>`	`[]`	Entries rendered top to bottom.
`class`	`string`	`''`	Additional Tailwind classes merged onto the root `<nav>`.