@@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.

 <!-- Navbar -->
                        <nav class="navbar
                            navbar-expand-lg navbar-light">
                        <a class="navbar-brand" href="#">Navbar</a>
                        <button class="navbar-toggler" type="button"
                          data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle
                            navigation">
                        <span class="navbar-toggler-icon"></span>
                        </button>

                        <div class="collapse
                            navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav
                            me-auto">
                        <li class="nav-item
                            active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item
                            dropdown">
                        <a class="nav-link
                            dropdown-toggle" href="#" id="navbarDropdown" role="button"
                          data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link
                            disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                        </li>
                        </ul>
                        <form class="form-inline my-2
                            my-lg-0">
                        <input class="form-control
                            me-sm-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn
                            btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                        </form>
                        </div>
                        </nav>

 <!-- Just
                          an image -->
                        <nav class="navbar navbar-light">
                        <a class="navbar-brand" href="#">
                        <img src="../assets/images/brand/logo/logo-icon.svg" width="30" height="30"
                          alt=""></a></nav>

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.

Design
HTML

 <!-- 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>

Navbar

Default

Brand

Offcanvas