Component
NavigationBar
NavigationBar uses a balanced three-column grid so the title remains centered even when leading and trailing controls have different widths.
Preview
Installation
pnpm dlx shadcn@latest add https://pwaui.com/r/navigation-bar.jsonUsage
import { NavigationBar } from "@/components/ui/navigation-bar"
export function Header() { return ( <NavigationBar> <NavigationBar.Leading> <NavigationBar.BackButton aria-label="Go back" /> </NavigationBar.Leading> <NavigationBar.Title>Settings</NavigationBar.Title> <NavigationBar.Trailing>Done</NavigationBar.Trailing> </NavigationBar> )}Anatomy
NavigationBarLeadingTitleTrailingBackButtonBehavior notes
- Inside AppShell, place NavigationBar within AppShell.Header.
- Router state is deliberately out of scope.
- Place consumer-supplied links in Leading or Trailing.
- Long titles truncate without displacing adjacent controls.
Accessibility
The root is a named navigation landmark. Icon-only controls require an aria-label.