Bootstrap Navbar

The navbar is the top menu of a website. In Bootstrap it is responsive: on a small screen it collapses into a button (a hamburger icon) which opens the menu, and on a big screen it shows all the links in a row.

A responsive navbar

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MySite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
        <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Disabled</a></li>
      </ul>
    </div>
  </div>
</nav>

The preview is narrow, so you see the toggle button. Click it to open the menu. We test the button in real Chrome:

const nav = document.getElementById('navbarNav');
console.log('menu open before the click: ' + nav.classList.contains('show'));
document.querySelector('.navbar-toggler').click();
await new Promise(r => setTimeout(r, 600));
console.log('menu open after the click: ' + nav.classList.contains('show'));
console.log('aria-expanded of the button: ' + document.querySelector('.navbar-toggler').getAttribute('aria-expanded'));

Important classes

Class	Meaning
.navbar	The wrapper of the navbar
.navbar-expand-lg	The menu is shown in a row from the lg breakpoint (992px) and up. Use sm, md, xl or xxl for other sizes
.navbar-brand	The logo or the name of the site
.navbar-toggler	The button for small screens
.navbar-collapse	The part which collapses
.navbar-nav, .nav-link	The list of links and each link

Dropdown, search form and colors

<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav2" aria-controls="nav2" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav2">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Courses</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">HTML</a></li>
            <li><a class="dropdown-item" href="#">CSS</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Bootstrap</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-light" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

In Bootstrap 5.3 the way to make a dark navbar is data-bs-theme="dark" on the navbar. The old classes navbar-dark and navbar-light are deprecated.

Position

• .fixed-top and .fixed-bottom fix the navbar to the top or the bottom of the window. Add a padding to the body, so the content is not hidden below it.
• .sticky-top keeps the navbar at the top when the page scrolls, and it uses the normal flow of the page.

Container and alignment

• Use .container (instead of .container-fluid) inside the navbar to center the content with a maximum width.
• Use ms-auto on a navbar-nav to push the links to the right, and me-auto to push the other things to the right.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.