@@include("../partials/head.html")
@@include("../partials/doc-navbar.html")
@@include("../partials/doc-sidenav.html")

# Navbar

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

## Offcanvas

Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. 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.

     <!-- offcanvas -->
    <div class="position-relative">
      <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand fs-3" href="#">Offcanvas
            navbar</a>
          <button class="navbar-toggler" type="button"
            data-bs-toggle="offcanvas"
            data-bs-target="#offcanvasNavbar"
            aria-controls="offcanvasNavbar">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="offcanvas offcanvas-end"
            tabindex="-1" id="offcanvasNavbar"
            aria-labelledby="offcanvasNavbarLabel">
            <div class="offcanvas-header">
              <h5 class="offcanvas-title"
                id="offcanvasNavbarLabel">Offcanvas</h5>
              <button type="button" class="btn-close
                text-reset" data-bs-dismiss="offcanvas"
                aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
              <ul class="navbar-nav justify-content-end
                flex-grow-1 pe-3 mb-2">
                <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="#">Pages</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Dashboard</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Docs</a>
                </li>

              </ul>
              <form class="d-flex">
                <input class="form-control me-2"
                  type="search" placeholder="Search"
                  aria-label="Search">
                <button class="btn btn-outline-success"
                  type="submit">Search</button>
              </form>
            </div>
          </div>
        </div>
       </nav>
     </div>

@@include("../partials/scripts.html")