logo
shape

Navbar

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

Navbar on Bootstrap
Navbar Light
<nav class="navbar navbar-expand-lg navbar-dark fs--1 bg-dark"><a class="navbar-brand" href="#">falcon</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContentdark" aria-controls="navbarContentdark" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarContentdark">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="navbarDropdowndark">Dropdown</a>
        <div class="dropdown-menu dropdown-menu-right py-0" aria-labelledby="navbarDropdowndark">
          <div class="bg-white rounded-soft py-2"><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>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0"><input class="form-control form-control-sm mr-sm-2" type="search" placeholder="Search" aria-label="Search" /><button class="btn btn-sm btn-light my-2 my-sm-0" type="submit">Search</button></form>
  </div>
</nav>
Navbar Primary
<nav class="navbar navbar-expand-lg navbar-dark fs--1 bg-primary"><a class="navbar-brand" href="#">falcon</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContentprimary" aria-controls="navbarContentprimary" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarContentprimary">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="navbarDropdownprimary">Dropdown</a>
        <div class="dropdown-menu dropdown-menu-right py-0" aria-labelledby="navbarDropdownprimary">
          <div class="bg-white rounded-soft py-2"><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>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0"><input class="form-control form-control-sm mr-sm-2" type="search" placeholder="Search" aria-label="Search" /><button class="btn btn-sm btn-light my-2 my-sm-0" type="submit">Search</button></form>
  </div>
</nav>

Get latest news
in your box!

Get Special Offers & Deals. We Never Spam.

Made With By ThemeWagon