Estimated reading: 5 minutes 42 views

🧱 Bootstrap 5 Navigation & Navbar Demo – Responsive Menus, Links & Toggler

🧲 Introduction – Create Responsive Navigation Bars with Bootstrap 5

The Bootstrap 5 navbar and navigation utilities offer a flexible, responsive framework for creating site headers, menus, and mobile-friendly navigations. These components include horizontal nav links, dropdowns, brand logos, toggler buttons, and support for alignment and dark/light themes.

🎯 In this guide, you’ll learn:

How to create a responsive navbar using .navbar, .navbar-expand-*, and .navbar-toggler
Style and align nav links using .nav, .nav-item, .nav-link
Add dropdowns and branding with ease
Use mobile-first design with collapsible menus

✅ Example 1 – Basic Horizontal Navbar

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <div class="d-flex">
    <a class="nav-link" href="#">Home</a>
    <a class="nav-link" href="#">About</a>
    <a class="nav-link" href="#">Contact</a>
  </div>
</nav>

Class	Description
`.navbar`	Main container for nav elements
`.navbar-brand`	Highlights site logo or title
`.nav-link`	Individual link item
`.bg-light`	Applies a light background to navbar

📌 A simple responsive navbar using flex display to align items horizontally.

✅ Example 2 – Responsive Navbar with Toggler

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MySite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNavbar">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Class	Description
`.navbar-expand-md`	Expands menu on medium screens and up
`.navbar-toggler`	Button toggles the collapse of nav links
`.collapse` + `.navbar-collapse`	Collapsible menu container
`.navbar-dark`, `.bg-dark`	Dark theme with white text links

📌 This example demonstrates a mobile-first responsive navbar that collapses into a toggler on small screens.

✅ Example 3 – Nav Tabs & Pills

<ul class="nav nav-tabs mb-3">
  <li class="nav-item">
    <a class="nav-link active" href="#">Overview</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Dashboard</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Settings</a>
  </li>
</ul>

Class	Description
`.nav-tabs`	Displays horizontal tabbed navigation
`.nav-pills`	Styled nav with pill-like active states
`.active`	Marks the current active item

📌 Tabs and pills provide tab-switching UX and highlight active states with clarity.

✅ Example 4 – Vertical Navigation

<ul class="nav flex-column bg-light p-3" style="width: 200px;">
  <li class="nav-item">
    <a class="nav-link active" href="#">Dashboard</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Reports</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Settings</a>
  </li>
</ul>

Class	Description
`.flex-column`	Stacks nav items vertically
`.bg-light`	Adds background color
`.p-3`	Adds padding to the vertical menu block

📌 Useful for sidebars and vertical nav panels in admin dashboards or multi-column layouts.

📘 Bootstrap 5 Navigation Utility Reference

Feature	Class Examples	Description
Responsive Navbar	`.navbar`, `.navbar-expand-*`	Full responsive site menu container
Nav Items	`.nav`, `.nav-item`, `.nav-link`	Horizontal or vertical navigation elements
Tabs & Pills	`.nav-tabs`, `.nav-pills`	Styled horizontal nav UI
Collapsible Menu	`.collapse`, `.navbar-toggler`	Toggle navigation visibility on mobile devices
Flex Column Menu	`.flex-column`	Vertical nav menu, ideal for sidebars

🛠️ Best Practices for Navbars & Navigation

Tip	Why It’s Useful
Use `.navbar-expand-*`	Control when navbar collapses on screen sizes
Add `aria-*` for toggler button	Improves accessibility and screen reader support
Use container wrappers	Aligns nav elements properly in page layout
Combine tabs with JS behavior	Enables tab-switching interaction with Bootstrap JS

📌 Summary – Recap & Next Steps

Bootstrap 5 provides everything you need to create responsive, accessible, and stylish navigations. With prebuilt classes, you can build dynamic headers, tabbed interfaces, and vertical sidebars easily.

🔍 Key Takeaways:

Use .navbar, .nav, .nav-tabs, and .nav-pills for layout
Combine .navbar-expand-* and .navbar-toggler for responsive toggles
Create vertical navs with .flex-column
Use .collapse for mobile-first collapsing menus

⚙️ Ideal for site headers, dashboards, multi-page apps, and mobile-first layouts.

❓ FAQs – Bootstrap 5 Navigation & Navbar

❓ Can I place a form inside a navbar?
✅ Yes. You can include <form> with .d-flex and .form-control for search or login.

❓ Can multiple navbars exist on the same page?
✅ Absolutely. You can have fixed top, sticky, or footer navs using position-* classes.

❓ Does the navbar support dropdowns?
✅ Yes. Use .dropdown, .dropdown-menu, and .dropdown-toggle for advanced menus.

❓ How do I change navbar color themes?
✅ Use .navbar-light with .bg-light, or .navbar-dark with .bg-dark for best contrast.

« Previous Next »

Share Now :