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