@@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/buy-template.html") @@include("../partials/scripts.html")