Foundations

Components

The core shell scaffolding of the system. Implements Apple's signature dynamic title transition, shifting titles to the header as users scroll.

bunx shadcn-svelte@latest add https://ui.grgurevic.click/r/navigation-stack.json

The basic setup for a navigation stack with a sticky header and transition effects.

Back

Profile Settings

Simulated view of the Navigation Stack page structure.

Background

The best practices when using navigation stacks.

Ensure the header title exactly matches the large title for consistent scroll transitions.
Always place a back Button or dismiss action in the leading header slot.
Avoid putting dense, multiline descriptions in the sticky header bar.
For content that slides in from the edge rather than pushing a new view, prefer a Sheet instead.

Navigation Stack sub-components and parameters.

Component / Prop	Type / Role	Default	Description
NavigationStack.Root	Context coordinator	-	Sets up reactive context coordinates (`NavigationStackState`) that bridge headers and large titles across layouts.
NavigationStack.Header	Sticky header bar	-	The sticky navigation header featuring a centered title and custom layout slots.
NavigationStack.LargeTitle	Scroll title block	-	Large title block positioned inside standard scroll streams. Registers itself automatically with surrounding parent root providers.
title	string	undefined	Small title text fading in on scrolls.

Give feedback