Navigation Stack

The core shell scaffolding of the system. Implements Apple's signature dynamic title transition, combining Intersection Observers and elastic GSAP blurs to shift titles as users scroll.

Preview

No preview since you can scroll on this page and then look at the top

Svelte Composition Code

<script lang="ts">
	import * as NavigationStack from "$lib/components/navigationStack";
	import { Button } from "$lib/components/ui/button";
	import { ChevronLeft } from "lucide-svelte";
</script>

<NavigationStack.Root>
	<NavigationStack.Header title="Profile Settings">
		{#snippet leading()}
			<Button variant="translucent" size="icon" onclick={() => history.back()}>
				<ChevronLeft class="size-4" />
			</Button>
		{/snippet}
	</NavigationStack.Header>

	<div class="p-6">
		<NavigationStack.LargeTitle>Profile Settings</NavigationStack.LargeTitle>
	</div>
</NavigationStack.Root>

API & Props Reference

NavigationStack.Root

Sets up reactive context coordinates (`NavigationStackState`) that bridge headers and large titles across layouts.

NavigationStack.Header

The sticky navigation header featuring a centered title and custom layout snippets on both ends.

• title: string - Small title text fading in on scrolls.
• #snippet leading: snippet - Custom buttons positioned on the far left.
• #snippet trailing: snippet - Custom buttons positioned on the far right.

NavigationStack.LargeTitle

Large title block positioned inside standard scroll streams. Registers itself automatically with surrounding parent root providers.