Logo
hummingbird

Navbar

The navbar provides a responsive header for navigation, branding, forms, and other interactive elements.

Class Name Type Description
navbar Component Navbar component
navbar-brand Inner Branding section
navbar-toggler Inner Toggler button for mobile view
navbar-collapse Inner Collapsible content container
navbar-nav Inner Navigation links container
nav-item Inner Navigation item
nav-link Inner Navigation link
navbar-text Inner Text content
navbar-nav-scroll Inner Scrollable navigation links container
navbar-expand Modifier Always expanded
navbar-expand-sm Modifier Expand at small breakpoint
navbar-expand-md Modifier Expand at medium breakpoint
navbar-expand-lg Modifier Expand at large breakpoint
navbar-expand-xl Modifier Expand at extra large breakpoint
navbar-expand-xxl Modifier Expand at double extra large breakpoint
Basic Example

A basic navbar includes branding, navigation links, dropdowns, and a search form within a responsive container.

HTML

<nav class="navbar navbar-expand-lg bg-subtle">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="icon-[material-symbols--menu-rounded] text-lg"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 lg:mb-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider" /></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="flex" role="search">
        <input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

The nav component structures navigation links within a navbar. It supports active and disabled states. Add the .active class on .nav-link to indicate the current page.

Note that you should also add the aria-current attribute on the active .nav-link.

HTML

<nav class="navbar navbar-expand-lg bg-subtle">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="icon-[material-symbols--menu-rounded] text-lg"></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>

You can avoid list-based approaches entirely if you like.

HTML

<nav class="navbar navbar-expand-lg bg-subtle">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="icon-[material-symbols--menu-rounded] text-lg"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>
Form

Forms can be placed inside a navbar to include inputs, buttons, or other interactive elements.

HTML

<nav class="navbar bg-subtle">
  <div class="container">
    <form class="flex" role="search">
      <input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Immediate .navbar children use flex with .justify-between by default. Adjust alignment with flex utilities.

HTML

<nav class="navbar bg-subtle">
  <div class="container">
    <a class="navbar-brand">Navbar</a>
    <form class="flex" role="search">
      <input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>
Text

To use text within a navbar, use the .navbar-text class.

HTML

<nav class="navbar bg-subtle">
  <div class="container">
    <span class="navbar-text">Navbar text with an inline element</span>
  </div>
</nav>
Color schemes

Navbars are flexible and support different background and color schemes to match your design.

<nav class="navbar navbar-expand-lg bg-subtle dark" data-bs-theme="dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg bg-primary-light dark" data-bs-theme="dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg bg-primary-lighter" data-bs-theme="light">
  <!-- Navbar content -->
</nav>
Containers

Use any of the responsive containers such as .sm:container, .md:container, .lg:container, .xl:container, .2xl:container to change how wide the content in your navbar is presented.

HTML

<nav class="navbar navbar-expand-lg bg-subtle">
  <div class="md:container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>
Scrolling

The .navbar-nav-scroll class allows vertical scrolling for .navbar-nav or other sub-components inside a collapsed navbar. This is especially useful for long navigation menus on smaller screens. By default, the scrollable area has a max height of 75vh. You can adjust this using utility classes (e.g., max-h-[value]) or by overriding the --scroll-height CSS variable for finer control.

HTML

<nav class="navbar navbar-expand-lg bg-subtle">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="icon-[material-symbols--menu-rounded] text-lg"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav navbar-nav-scroll me-auto my-2 lg:my-0" style="--scroll-height: 100px;">
        <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="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Link</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"/></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Link</a>
        </li>
      </ul>
      <form class="flex" role="search">
        <input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
Responsive behaviors

Navbars use .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl|-xxl} classes to control when content collapses into a toggleable menu. With utility classes, you can also decide when to show or hide specific elements.

For navbars that never collapse, add the .navbar-expand class. For navbars that always collapse, omit the .navbar-expand class.

External content

The collapse plugin can toggle content outside the .navbar by matching id with data-bs-target.

HTML

<div class="collapse" id="navbarToggleExternalContent"x>
  <div class="bg-subtle p-4">
    <h6 class="font-semibold mb-0">Collapsed content</h6>
    <span>Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar bg-subtle">
  <div class="container">
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="icon-[material-symbols--menu-rounded] text-lg"></span>
    </button>
  </div>
</nav>
Offcanvas

Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas component. We extend both the offcanvas default styles and use our .navbar-expand-* classes to create a dynamic and flexible navigation sidebar.

In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the .navbar-expand-* class entirely.

HTML

<nav class="navbar bg-subtle">
  <div class="container">
    <a class="navbar-brand" href="#">Offcanvas</a>
    <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
      <span class="icon-[material-symbols--menu-rounded] text-lg"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title font-semibold" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn btn-icon ms-auto" data-bs-dismiss="offcanvas" aria-label="Close">
          <span class="icon-[material-symbols--close-rounded] text-base"></span>
        </button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider"/>
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="flex mt-3"role="search">
          <input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>