Navbar

Responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Basic Navbar

Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

Supported content

Navbar come with built-in support for a handful of sub-components as below.

The .navbar-brand can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.

Navbar navigation links build on our .nav options with their own modifier class and require the use of toggler classes for proper responsive styling.

Place various form controls and components within a navbar with .d-flex.

Text

Navbar may contain bits of text with the help of .navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text. 

<nav class="navbar navbar-expand-xl bg-navbar-theme">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-2">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-ex-2">
      <div class="navbar-nav me-auto">
        <a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
        <a class="nav-item nav-link" href="javascript:void(0)">About</a>
        <a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
      </div>

      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

Open on Hover

Default bootstrap dropdown open on click. Use dropdown-hover.js and with the help of data-trigger="hover" attribute dropdown will open on hover. 

<script src="assets/vendor/js/dropdown-hover.js"></script>
<nav class="navbar navbar-expand-lg bg-navbar-theme">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-15">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar-ex-15">
      <ul class="navbar-nav me-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="javascript:void(0)" data-bs-toggle="dropdown" data-trigger="hover">Dropdown</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:void(0)">Action</a>
            <a class="dropdown-item" href="javascript:void(0)">Another action</a>
            <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          </div>
        </li>        
      </ul>
    </div>
  </nav>

Mega Dropdown

Mega menu is a drop-down menu lets you pack your web app entire navigation into a single menu. In order to create Mega Dropdown you need to include mega-dropdown.js. 

<script src="assets/vendor/js/mega-dropdown.js"></script>

Use .mega-dropdown to create mega dropdown, Add .mega-link class to the element to close menu on click. Check below example for usage. 

<nav class="navbar navbar-expand-lg bg-navbar-theme" style="z-index: 21">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-14">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-ex-14">
      <ul class="navbar-nav me-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="javascript:void(0);" data-bs-toggle="dropdown">Dropdown</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:void(0)">Action</a>
            <a class="dropdown-item" href="javascript:void(0)">Another action</a>
            <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          </div>
        </li>
        <li class="nav-item mega-dropdown">
          <a class="nav-link dropdown-toggle navbar-ex-14-mega-dropdown mega-dropdown" href="javascript:void(0);" data-bs-toggle="mega-dropdown">Mega</a>
          <div class="dropdown-menu px-4 py-0">
            <div class="row row-bordered">
              <div class="col-sm-6 col-lg p-4">
                <h6 class="m-2">Applications</h6>
                <ul class="nav flex-column">
                  <li class="nav-item">
                    <a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="tf-icons ti ti-mail ti-sm me-1"></i> Email</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="tf-icons ti ti-messages ti-sm me-1"></i> Chat</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="tf-icons ti ti-checklist ti-sm me-1"></i> ToDos</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="tf-icons ti ti-calendar ti-sm me-1"></i> Calender</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link mega-dropdown-link disabled" href="javascript:void(0)" tabindex="-1"><i class="tf-icons ti ti-ban ti-sm me-1"></i> Disabled</a>
                  </li>
                </ul>
              </div>
              <div class="col-sm-6 col-lg p-4">
                <h6 class="m-2">Useful Links</h6>
                <ul class="nav flex-column">
                  <li class="nav-item">
                    <a class="nav-link mega-dropdown-link" href="javascript:void(0)">Profit Margins</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link mega-dropdown-link" href="javascript:void(0)">Overall Profits</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link mega-dropdown-link" href="javascript:void(0)">Gross Profits</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link mega-dropdown-link" href="javascript:void(0)">Net Profits</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link mega-dropdown-link" href="javascript:void(0)">Quarterly Profits</a>
                  </li>
                </ul>
              </div>
              <div class="col-sm-6 col-lg p-4">
                <h6 class="my-2">List Group</h6>
                <div class="list-group">
                  <a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Analytical Reports</a>
                  <a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Operational Growth</a>
                  <a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Files and Directories</a>
                  <a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Audit & Logs</a>
                  <a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Customer CRM</a>
                </div>
              </div>
              <div class="col-sm-6 col-lg p-4">
                <form action="javascript:void(0)">
                  <div class="mb-4">
                    <label class="form-label" for="exampleDropdownFormEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
                  </div>
                  <div class="mb-4">
                    <label class="form-label" for="exampleDropdownFormPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password" />
                  </div>
                  <div class="mb-4">
                    <div class="form-check">
                      <input type="checkbox" class="form-check-input" id="dropdownCheck" />
                      <label class="form-check-label" for="dropdownCheck">
                        Remember me
                      </label>
                    </div>
                  </div>
                  <button type="submit" class="btn btn-primary">Sign in</button>
                </form>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Color Schemes

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.

Create navbar with Primary Color scheme by using .navbar-dark & .bg-primary classes along with .navbar.

Create navbar with Secondary Color scheme by using .navbar-dark & .bg-secondary classes along with .navbar.

Create navbar with Success Color scheme by using .navbar-dark & .bg-success classes along with .navbar.

Create navbar with Danger Color scheme by using .navbar-dark & .bg-danger classes along with .navbar.

Create navbar with Warning Color scheme by using .navbar-dark & .bg-warning classes along with .navbar.

Create navbar with Info Color scheme by using .navbar-dark & .bg-info classes along with .navbar.

Create navbar with Dark Color scheme by using .navbar-dark & .bg-dark classes along with .navbar.

Create navbar with White Color scheme by using .navbar-light & .bg-white classes along with .navbar.

Here's an example of basic responsive navbar theme .bg-navbar-theme that have theme navbar bg color and automatically collapses at the large breakpoint.

Here is the theme navbar bg color mixin which allow you to easily customize navbar style by adding your own class and colors. 

@mixin template-navbar-style($parent, $bg, $color: null, $active-color: null, $border: null)
@include template-navbar-style('.my-bg-navbar-theme', #fff, $color: $text-muted, $active-color: $body-color);
© 2017- Pixinvent, Hand-crafted & Made with ❤️