Bootstrap 6 Navigation — 8 Free Navbar, Menu & Sidebar Examples
Eight Bootstrap 6 navigation patterns, each on its own page. Navigation changed more between v5 and v6 than any other area of the framework, so this pack doubles as a migration reference — every example calls out what moved and why.
The headline changes: .navbar-collapse no longer exists and the mobile menu is a native <dialog class="drawer">; Dropdown became Menu with no wrapper and no toggle class; Nav overflow is entirely new; breadcrumb separators are real elements; and ScrollSpy was rebuilt on IntersectionObserver with offset replaced by top-margin.
Key features
- Eight navigation patterns, each on its own page with prev/next navigation
- Standard navbar showing the v6 drawer pattern that replaces .navbar-collapse
- Dropdown menus using the new Menu component, positioned by Floating UI
- Nav overflow — items fold into a menu automatically, new in v6
- Tabs with fade panels, plus the pill variant
- Application sidebar rail, with the .navbar-nav column-by-default gotcha explained
- Centered editorial masthead using a three-column grid
- Breadcrumbs with the new .breadcrumb-link and real divider elements, plus pagination
- Working ScrollSpy contents rebuilt on IntersectionObserver, with top-margin
- Every example notes what changed from Bootstrap 5 — a migration reference as much as a pack
- ESM-only vanilla JavaScript — no jQuery, no bundler, no build step
Before you use it
Bootstrap 6 is in alpha: 6.0.0-alpha.1 shipped on 8 October 2026, and more breaking changes are expected before the stable release. This template bundles the exact Bootstrap build it was tested against, so nothing changes until you choose to upgrade. Bootstrap 6 supports Chrome and Edge 130+, Firefox 132+ and Safari 18+.
