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
Color schemes
<nav class="navbar navbar-expand-lg bg-dark navbar mb-3" data-bs-theme="dark">
  <div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDarkExample" aria-controls="navbarDarkExample" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarDarkExample">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <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="#">Link</a></li>
        <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDarkExampleDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu py-0" aria-labelledby="navbarDarkExampleDropdown">
            <div class="py-2 rounded-3"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a>
              <hr class="dropdown-divider" /><a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </li>
        <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
        <button class="btn btn-light" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
<nav class="navbar navbar-expand-lg bg-primary navbar mb-3" data-bs-theme="dark">
  <div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarPrimaryExample" aria-controls="navbarPrimaryExample" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarPrimaryExample">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <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="#">Link</a></li>
        <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarPrimaryExampleDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu py-0" aria-labelledby="navbarPrimaryExampleDropdown">
            <div class="py-2 rounded-3"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a>
              <hr class="dropdown-divider" /><a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </li>
        <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
        <button class="btn btn-light" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
<nav class="navbar navbar-expand-lg bg-primary-subtle navbar" data-bs-theme="light">
  <div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarPrimaryExample" aria-controls="navbarPrimaryExample" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarPrimaryExample">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <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="#">Link</a></li>
        <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarPrimaryExampleDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu py-0" aria-labelledby="navbarPrimaryExampleDropdown">
            <div class="py-2 rounded-3"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a>
              <hr class="dropdown-divider" /><a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </li>
        <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
        <button class="btn btn-light" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Thank you for creating with Falcon |
2023 © Themewagon

v3.18.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.


RTL Mode

Switch your language direction

RTL Documentation

Fluid Layout

Toggle container layout system

Fluid Documentation

Navigation Position

Select a suitable navigation system for your web application


Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize