Public demo
UI kit · Navigation
Breadcrumbs, horizontal tabs, numeric pagination, and a stepped wizard rail—orientation patterns for multi-page products.
Wayfinding primitives that appear together in settings, billing, and onboarding flows.
UI showcase
Static composition for reference—swap in generated output when your pipeline is connected. Everything below is local markup only.
Keeps hierarchy shallow: users always know where they are and what happens next.
Why this demo works
- Breadcrumbs reduce support load on deep IA.
- Steppers set expectations for long workflows.
Suggested use cases
- Checkout and setup wizards
- Enterprise settings with nested routes
What's included
- Text breadcrumb with current page emphasis
- Pill-style tab strip with active state
- Previous/next pager with current page
- Horizontal stepper with completed, active, and upcoming steps
Editable in Frontuna
Drop into Next.js layouts or Angular router outlets without changing structure.
Use this page as a briefing artifact: copy structure, swap copy, and connect your components—no fake generated code required.
Build notes
- Reflect router pathname into breadcrumbs automatically.
- Use aria-current on the active tab and step.