Skip to content
Bootstrap HTML

Documentation
On this page

Navbar

A responsive bar with Bootstrap’s navbar classes. The collapsing menu is <details> / <summary>. The offcanvas variant is the existing <dialog class="offcanvas">. No Collapse plugin.

Sizes are minified and gzip. A plugin figure includes the Bootstrap runtime that plugin imports. Shipping every plugin is bootstrap.bundle.min.js at 23.3 KB gzip, not the sum of these rows.
What runs it JavaScript
Bootstrap 5.3 Collapse plugin. Navbar is that plugin plus the navbar CSS. 5.6 KB gzip
This repo details and summary, or dialog for the offcanvas navbar 0 KB

When those APIs are missing, this page also loads invoker-commands.js (0.8 KB gzip) and dialog-closedby.js (0.5 KB gzip). See Polyfills.

Markup this component accepts. The full inventory is /components.json.
Avoid
  • The brand stays outside the <details>, not inside the collapsing panel.
  • .navbar-toggler has to be the <summary>.
  • Do not put role="search" on the form inside <search>. The element is already that landmark.

How it works

  • Put details.navbar-collapse in the navbar. The hamburger is summary.navbar-toggler inside that <details>. The brand stays a sibling, outside the panel, so it stays visible when the menu is closed.
  • .navbar-expand-* shows the links from that breakpoint up and hides the toggler. Below it, the summary opens the panel.
  • A toggler outside the panel cannot point at a distant collapse. Trigger and content have to be parent and child. Use the offcanvas navbar when the button must sit outside the menu.
  • Dropdowns in the bar are the same command="toggle-popover" menus as elsewhere.
  • Wrap the search form in <search>. That element is the search landmark; do not also set role="search" on the form.

Supported content

Nav links, a dropdown, and a search landmark. Resize below lg to use the toggler.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <details class="navbar-collapse">
      <summary class="navbar-toggler" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </summary>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <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">
        <button class="nav-link dropdown-toggle" type="button" command="toggle-popover" commandfor="navbarDropdown">
          Dropdown
        </button>
        <ul class="dropdown-menu" popover="auto" id="navbarDropdown">
          <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>
    <search>
      <form class="d-flex">
        <input class="form-control me-2" type="search" name="q" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </search>
    </details>
  </div>
</nav>

Color schemes

Set data-bs-theme="dark" on the navbar (or a parent) for light text on a dark or colored bar. .navbar-light and .navbar-dark are deprecated in Bootstrap 5.3.

<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <details class="navbar-collapse">
      <summary class="navbar-toggler" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </summary>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <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>
    </details>
  </div>
</nav>

<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <details class="navbar-collapse">
      <summary class="navbar-toggler" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </summary>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <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>
    </details>
  </div>
</nav>

Offcanvas

command="show-modal" opens a dialog.offcanvas. From the navbar-expand breakpoint the dialog sits in the bar instead of the top layer.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" command="show-modal" commandfor="offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <dialog class="offcanvas offcanvas-end" id="offcanvasNavbar" closedby="any" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" command="close" commandfor="offcanvasNavbar" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <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">
            <button class="nav-link dropdown-toggle" type="button" command="toggle-popover" commandfor="offcanvasNavbarDropdown">
              Dropdown
            </button>
            <ul class="dropdown-menu" popover="auto" id="offcanvasNavbarDropdown">
              <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>
        <search class="d-flex mt-3 mt-lg-0">
          <form class="d-flex flex-grow-1">
            <input class="form-control me-2" type="search" name="q" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </search>
      </div>
    </dialog>
  </div>
</nav>

Accessibility

The hamburger is a <summary>. The browser exposes expanded and collapsed on that disclosure; do not add aria-expanded there.

Dropdowns in the bar are the same popover menus as elsewhere. Invoker Commands keep aria-expanded in sync on the toggle.

The offcanvas navbar is a modal <dialog>. Name it with aria-labelledby.

Wrap the search form in <search>. Name the input with aria-label or a visible label.

Browser support

Three columns, not one baseline. The same row is on the overview.
No script Polyfill No fallback
The same details menu. .navbar-expand-* shows it from that breakpoint. The offcanvas variant is a dialog. The offcanvas toggler uses the same command polyfill as the modal. The hamburger cannot sit outside the <details>. Use the offcanvas navbar for that.