What is Navbar brand and toggler in Bootsrap?

Bootsrapmarkup~5 mins

Navbar brand and toggler in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

A navbar brand shows your website's name or logo at the top. The toggler button helps users open or close the menu on small screens.

You want to show your website's name or logo clearly on every page.

You want a menu that works well on phones and tablets.

You want users to easily open and close the navigation menu on small screens.

You want a clean header that adapts to different screen sizes.

Syntax

Bootsrap

<nav class="navbar">
  <a class="navbar-brand" href="#">BrandName</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarMenu">
    <!-- menu items here -->
  </div>
</nav>

The navbar-brand is usually a link with your logo or name.

The navbar-toggler button controls showing or hiding the menu on small screens.

Examples

This shows a simple brand name that links to the homepage.

Bootsrap

<a class="navbar-brand" href="#">MySite</a>

This button toggles the menu with ID menu on small screens.

Bootsrap

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

This is a full navbar with brand, toggler, and menu items that collapse on small screens.

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent" aria-controls="navContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navContent">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
    </ul>
  </div>
</nav>

Sample Program

This example shows a navbar with a brand name "MyWebsite" and a toggler button. On small screens, the menu items collapse and can be opened by clicking the toggler button.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Navbar Brand and Toggler Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">MyWebsite</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>
        </ul>
      </div>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

OutputSuccess

Important Notes

Always include aria-label on the toggler button for screen readers.

Use navbar-expand-lg or similar classes to control when the menu collapses.

Make sure to include Bootstrap's JavaScript bundle for the toggler to work.

Summary

The navbar-brand shows your site name or logo.

The navbar-toggler button helps open and close the menu on small screens.

Use Bootstrap classes and attributes to make the navbar responsive and accessible.