Bootstrap Navbar

A Bootstrap Navbar is a navigation header that is placed at the top of the page. It can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class="navbar navbar-default">. Check this 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 Transparent -->
<nav
  class="navbar navbar-expand-lg top-0 z-index-3 w-100 shadow-none my-3  navbar-transparent ">
  <div class="container">
    <a class="navbar-brand  text-white " href="" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
      Material Kit
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navigation">
      <ul class="navbar-nav navbar-nav-hover mx-auto">
        <li class="nav-item px-3">
          <a class="nav-link">
            Pages
          </a>
        </li>

        <li class="nav-item px-3">
          <a class="nav-link">
            Utilities
          </a>
        </li>

        <li class="nav-item px-3">
          <a class="nav-link">
            Blocks
          </a>
        </li>

        <li class="nav-item px-3">
          <a class="nav-link">
            Docs
          </a>
        </li>
      </ul>

      <ul class="navbar-nav ms-auto">
        <button class="btn  btn-white  mb-0">Buy Now</button>
      </ul>
    </div>
  </div>
</nav>
<!-- End Navbar -->

Examples


<!-- Navbar Dark -->
<nav
  class="navbar navbar-expand-lg navbar-dark bg-gradient-dark z-index-3 py-3">
  <div class="container">
    <a class="navbar-brand text-white" href="" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
      Material Kit
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navigation">
      <ul class="navbar-nav navbar-nav-hover mx-auto">
        <li class="nav-item px-3">
          <a class="nav-link text-white opacity-8">
            Pages
          </a>
        </li>

        <li class="nav-item px-3">
          <a class="nav-link text-white opacity-8">
            Utilities
          </a>
        </li>

        <li class="nav-item px-3">
          <a class="nav-link text-white opacity-8">
            Blocks
          </a>
        </li>

        <li class="nav-item px-3">
          <a class="nav-link text-white opacity-8">
            Docs
          </a>
        </li>
      </ul>

      <ul class="navbar-nav ms-auto">
        <button class="btn bg-gradient-primary mb-0">Buy Now</button>
      </ul>
    </div>
  </div>
</nav>
<!-- End Navbar -->


<!-- Navbar Light -->
<nav
  class="navbar navbar-expand-lg navbar-light bg-white z-index-3 py-3">
  <div class="container">
    <a class="navbar-brand" href="" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
      Material Kit
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navigation">
      <ul class="navbar-nav navbar-nav-hover mx-auto">
        <li class="nav-item px-3">
          <a class="nav-link">
            Pages
          </a>
        </li>

        <li class="nav-item px-3">
          <a class="nav-link">
            Utilities
          </a>
        </li>

        <li class="nav-item px-3">
          <a class="nav-link">
            Blocks
          </a>
        </li>

        <li class="nav-item px-3">
          <a class="nav-link ">
            Docs
          </a>
        </li>
      </ul>

      <ul class="navbar-nav ms-auto">
        <button class="btn bg-gradient-primary mb-0">Buy Now</button>
      </ul>
    </div>
  </div>
</nav>
<!-- End Navbar -->


</div>