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 has not been released. npm i bootstrap@6 does not work yet and the framework is still changing, so treat this as a head start on learning v6 rather than a foundation for a production site you need to maintain today. The framework is vendored into the template at a pinned commit, so nothing here can drift. It targets evergreen browsers only — Safari 16.4+, Chrome 111+ and Firefox 113+ — because Bootstrap 6 is built on oklch() and color-mix().
