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>

Start building beautiful apps

Contact

369 ape view Avenue

Brooklyn, NY

369 ape view Avenue

Mon - Fri 9am - 5pm

+91 3929 3355

Brooklyn, NY

Subscribe

Latest Shape news, articles, and resources sent straight to your inbox every month.

We’ll never share your details. See our Privacy Policy

Made With by ThemeWagon