🧭 Bootstrap 5 Navigation & Menus – Navbars, Dropdowns, Tabs & Scrollspy
🧲 Introduction – Build Mobile-First Navigation with Bootstrap 5
Bootstrap 5 offers a comprehensive set of navigation and menu components that help developers build clean, responsive, and mobile-friendly navigation systems. From fixed navbars and offcanvas sidebars to dropdown menus and tabbed navigation, these components are fully customizable and come with built-in JavaScript behaviors for interactivity—no extra scripting required.
🎯 What You’ll Learn:
- ✅ How to create responsive navbars with togglers, links, and branding
- ✅ How to use tabs and nav pills to organize UI sections
- ✅ How to add dropdown menus inside navbars or standalone buttons
- ✅ How to build mobile slide-in menus using Offcanvas
- ✅ How to implement Scrollspy to highlight sections dynamically as users scroll
- ✅ How to use pagination for multi-page navigation
📘 Topics Covered
| 📂 Navigation Feature | 📝 Description |
|---|---|
| 📌 Bootstrap 5 – Navbar | Create responsive top headers with brand, links, toggle buttons, and collapsible menus. |
| 📁 Bootstrap 5 – Navs & Tabs | Build horizontal or vertical .nav-based tabbed interfaces and content filters. |
| 🔽 Bootstrap 5 – Dropdowns | Add contextual menus to buttons or navbar items using .dropdown, JavaScript toggles. |
| 🧭 Bootstrap 5 – Offcanvas | Slide-out side panels for mobile-first navigation, controlled via togglers. |
| 📄 Bootstrap 5 – Pagination | Add navigation controls with page numbers and Previous / Next links. |
| 🎯 Bootstrap 5 – Scrollspy | Highlight active links based on scroll position to show where the user is on the page. |
🔎 Topic Explanations
📌 Bootstrap 5 – Navbar
Use .navbar, .navbar-expand-*, and .navbar-light/dark classes to build responsive headers that contain brand names, links, toggles, and collapsible menus.
Example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
</ul>
</div>
</nav>
📁 Bootstrap 5 – Navs & Tabs
Use .nav and .nav-tabs or .nav-pills to create content tabs or navigation links.
Example:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab1">Tab 1</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">Content for Tab 1</div>
</div>
🔽 Bootstrap 5 – Dropdowns
Add interactive dropdowns using .dropdown, .dropdown-toggle, and .dropdown-menu.
Example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
Menu
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Item 1</a></li>
</ul>
</div>
🧭 Bootstrap 5 – Offcanvas
Create mobile slide-in menus using .offcanvas, toggle buttons, and placement classes (offcanvas-start, offcanvas-end, etc.).
Example:
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#sidebar">
Open Menu
</button>
<div class="offcanvas offcanvas-start" id="sidebar">
<div class="offcanvas-header">
<h5>Menu</h5>
<button class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
</div>
</div>
📄 Bootstrap 5 – Pagination
Use .pagination and .page-item to create previous/next buttons and page numbers.
Example:
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
🎯 Bootstrap 5 – Scrollspy
Scrollspy auto-updates active links based on scroll position. Requires .data-bs-spy="scroll" and linking IDs.
Example:
<body data-bs-spy="scroll" data-bs-target="#scrollMenu" data-bs-offset="0" tabindex="0">
<nav id="scrollMenu">
<a href="#section1">Section 1</a>
</nav>
<section id="section1">...</section>
</body>
📌 Summary – Recap & Next Steps
Bootstrap 5 makes building responsive, accessible, and interactive navigation systems simple. Whether you’re designing a multi-level navbar, tabbed content, dropdown menus, or scroll-aware links, the framework provides everything you need out-of-the-box with minimal coding.
🔍 Key Takeaways:
- Navbars provide top-level, collapsible site navigation
- Tabs and pills organize content into easy-to-navigate sections
- Dropdowns create versatile menus in headers or content areas
- Offcanvas enables modern, mobile-first side navigation
- Scrollspy enhances UX by tracking scroll position for nav updates
- Pagination helps manage large data or multi-page interfaces
⚙️ Real-World Use:
Perfect for websites, dashboards, blogs, single-page apps, and any layout requiring structured navigation and responsive menus.
❓ FAQ – Bootstrap 5 Navigation
❓ How do I make a sticky header in Bootstrap 5?
✅ Use .sticky-top on your <nav> element to keep it fixed while scrolling.
❓ Can I open a dropdown on hover instead of click?
✅ Bootstrap supports click-based dropdowns by default. For hover, you’ll need to use a custom script or plugin.
❓ What is the difference between navbar and nav?
✅ .navbar is used for full navigation headers, while .nav is used for content-level navigation like tabs or pills.
❓ How is Scrollspy activated in Bootstrap 5?
✅ Add data-bs-spy="scroll" to your <body> or scrollable container and link it to a navbar via data-bs-target.
❓ Does Offcanvas require JavaScript?
✅ Yes, Bootstrap 5 Offcanvas components rely on its JavaScript plugin for toggle functionality.
Share Now :
