Navigation Patterns
Responsive navigation components for headers, sidebars, breadcrumbs, mobile menus, and command palettes.
What's Included#
- Header navigation with logo, links, and user menu (Server Component)
- Mobile slide-out navigation with hamburger toggle
- Sidebar navigation with icons and active state tracking via pathname
- Breadcrumb trails with auto-generation from URL path
- Command palette for keyboard-driven search and navigation
Usage#
Via CLI#
Loading code block...
Via AI Assistant#
Ask your AI assistant:
- "Use the navigation pattern from Bootspring"
- "Apply the Bootspring navigation pattern to my project"
Key Considerations#
- Always highlight active states so users know their current location
- Keep navigation placement consistent and predictable across pages
- Support keyboard navigation with Tab, Enter, and arrow keys
- Make mobile navigation accessible with clear hamburger menu affordance
- Add skip-to-content links for keyboard and screen reader users
Related Patterns#
- Layouts - Page layout patterns
- Tabs - Tab navigation patterns
- Command Palette - Keyboard-driven navigation