Component
NavigationBar
NavigationBar uses a balanced three-column grid so the title remains centered even when leading and trailing controls have different widths. Its back control composes with client-side router links through render.
Preview
Installation
pnpm dlx shadcn@latest add https://pwaui.com/r/navigation-bar.jsonUsage
import Link from "next/link"import { NavigationBar } from "@/components/ui/navigation-bar"
export function Header() { return ( <NavigationBar> <NavigationBar.Leading> <NavigationBar.BackButton render={<Link href="/settings" />} aria-label="Back to settings" /> </NavigationBar.Leading> <NavigationBar.Title>Settings</NavigationBar.Title> <NavigationBar.Trailing>Done</NavigationBar.Trailing> </NavigationBar> )}Anatomy
NavigationBarLeadingTitleTrailingBackButtonComposition
See how PWAProvider, AppShell, SafeArea, NavigationBar, and TabBar divide viewport, scrolling, safe-area, and navigation responsibilities.
Behavior notes
- Inside AppShell, place NavigationBar within AppShell.Header.
- Use BackButton with onClick for history-based navigation or render with your router's Link when the destination is known.
- The render prop follows the Base UI composition convention and preserves the router link's handlers, classes, and ref.
- Long titles truncate without displacing adjacent controls.
Platform limitations
- Back navigation is application-controlled. The OS/browser back gesture and the platform back stack are not managed by this component.
Accessibility
The root is a named navigation landmark. BackButton supplies a default Back label when it renders only the built-in icon; use a more specific aria-label when context helps.