# 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.

## Menu

Copy

    <!-- 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">
          Soft UI Dashboard
        </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 ms-auto">
            <div class="row">
              <div class="col-auto m-auto">
                <a class="text-white cursor-pointer">
                  <i class="fa fa-cog fixed-plugin-button-nav"></i>
                </a>
              </div>
              <div class="col-auto m-auto">
                <div class="dropdown">
                  <a class="text-white cursor-pointer" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa fa-bell"></i>
                  </a>
                  <ul class="dropdown-menu dropdown-menu-right px-2 py-3 ms-n4" aria-labelledby="dropdownMenuButton">
                    ...
                  </ul>
                </div>
              </div>
              <div class="col-auto">
                <div class="bg-white border-radius-lg d-flex me-2">
                  <input type="text" class="form-control border-0 ps-3" placeholder="Type here...">
                  <button class="btn bg-gradient-primary my-1 me-1">Search</button>
                </div>
              </div>
            </div>
          </ul>
        </div>
      </div>
    </nav>
    <!-- End Navbar -->

## Examples

Copy

    <!-- 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">
          Soft UI Dashboard
        </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 ms-auto">
            <div class="row">
              <div class="col-auto m-auto">
                <a class="text-white cursor-pointer">
                  <i class="fa fa-cog fixed-plugin-button-nav"></i>
                </a>
              </div>
              <div class="col-auto m-auto">
                <div class="dropdown">
                  <a class="text-white cursor-pointer" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa fa-bell"></i>
                  </a>
                  <ul class="dropdown-menu dropdown-menu-right px-2 py-3 ms-n4" aria-labelledby="dropdownMenuButton">
                    ...
                  </ul>
                </div>
              </div>
              <div class="col-auto">
                <div class="bg-white border-radius-lg d-flex me-2">
                  <input type="text" class="form-control border-0 ps-3" placeholder="Type here...">
                  <button class="btn bg-gradient-primary my-1 me-1">Search</button>
                </div>
              </div>
            </div>
          </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">
          Soft UI Dashboard
        </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 ms-auto">
            <div class="row">
              <div class="col-auto m-auto">
                <a class="cursor-pointer">
                  <i class="fa fa-cog fixed-plugin-button-nav"></i>
                </a>
              </div>
              <div class="col-auto m-auto">
                <div class="dropdown">
                  <a class="cursor-pointer" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa fa-bell"></i>
                  </a>
                  <ul class="dropdown-menu dropdown-menu-right px-2 py-3 ms-n4" aria-labelledby="dropdownMenuButton">
                    ...
                  </ul>
                </div>
              </div>
              <div class="col-auto">
                <div class="bg-white border-radius-lg d-flex me-2">
                  <input type="text" class="form-control border-0 ps-3" placeholder="Type here...">
                  <button class="btn bg-gradient-primary my-1 me-1">Search</button>
                </div>
              </div>
            </div>
          </ul>
        </div>
      </div>
    </nav>
    <!-- End Navbar -->

    </div>