Headers

Documentation and examples for Docs UI Kit's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

How it works

Here’s what you need to know before getting started with the navbar:

  • Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
  • Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
  • Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
  • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
  • Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar. See the display utility class.
  • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

Read on for an example and list of supported sub-components.

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

  • .navbar-brand for your company, product, or project name.
  • .navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
  • .navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.
  • .form-inline for any form controls and actions.
  • .navbar-text for adding vertically centered strings of text.
  • .collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.

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

Examples 

<!-- Navbar Primary -->
<nav class="navbar navbar-expand-lg navbar-dark navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand mr-0" href="home-page-1.html"><img src="../assets/img/logo-light.png" alt="Docs UI Kit" style="width: 150px;"></a>

    <!-- Header Search -->
    <input class="border-0 d-none d-lg-block form-control form-control-sm w-100 ml-lg-4" type="text" placeholder="Search...">
    <!-- End Header Search -->

    <!-- Header Links -->
    <ul class="navbar-nav duik-header__nav small text-nowrap flex-row ml-0 ml-md-3">
      <li class="nav-item">
        <a class="nav-link" href="https://htmlstream.com/preview/docs-ui-kit/" target="_blank" title="Live Preview"><i class="fa fa-desktop mr-md-1"></i> <span class="d-none d-md-inline-block">Live Preview</span></a>
      </li>
      <li class="nav-item ml-4">
        <a class="nav-link" href="https://github.com/htmlstreamofficial/docs-ui-kit" target="_blank" title="Report an Issue"><i class="fab fa-github mr-md-1"></i> <span class="d-none d-md-inline-block">Report an Issue</span></a>
      </li>
      <li class="nav-item ml-3 ml-md-5">
        <a class="btn btn-sm btn-light text-primary" href="https://htmlstream.com/templates/docs-ui-kit" title="Download"><i class="fas fa-cloud-download-alt mr-md-1"></i> <span class="d-none d-md-inline-block">Download</span></a>
      </li>
    </ul>
    <!-- End Header Links -->
  </div>
</nav>
<!-- End Navbar Primary -->
Copy
<!-- Navbar Light -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand mr-0 mr-md-5 mr-lg-7" href="home-page-1.html"><img src="../assets/img/logo-dark.png" alt="Docs UI Kit" style="width: 150px;"></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse-1" aria-controls="navbarCollapse-1" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse-1">
      <!-- Header Links -->
      <ul class="navbar-nav mr-md-auto">
        <li class="nav-item mx-md-1 mx-lg-2">
          <a class="nav-link link-dark link-hover-dark" href="https://htmlstream.com/preview/docs-ui-kit/" target="_blank"><i class="fa fa-desktop mr-2"></i>Live Preview</a>
        </li>
        <li class="nav-item d-none d-sm-block mx-md-1 mx-lg-2">
          <a class="nav-link link-dark link-hover-dark" href="https://github.com/htmlstreamofficial/docs-ui-kit" target="_blank"><i class="fab fa-github mr-1"></i> Report an Issue</a>
        </li>
      </ul>
      <!-- End Header Links -->

      <!-- Header Links 2 -->
      <ul class="navbar-nav align-items-md-center">
        <li class="nav-item my-2 my-md-0">
          <ul class="list-inline">
            <li class="list-inline-item ml-0 mx-md-2">
              <a class="link-dark link-hover-dark" target="_blank" href="https://github.com/htmlstreamofficial/">
                <i class="fab fa-github"></i>
              </a>
            </li>
            <li class="list-inline-item mx-2">
              <a class="link-dark link-hover-dark" target="_blank" href="https://www.facebook.com/htmlstream">
                <i class="fab fa-facebook"></i>
              </a>
            </li>
            <li class="list-inline-item mx-2">
              <a class="link-dark link-hover-dark" target="_blank" href="https://www.instagram.com/htmlstream">
                <i class="fab fa-instagram"></i>
              </a>
            </li>
            <li class="list-inline-item mx-2">
              <a class="link-dark link-hover-dark" target="_blank" href="https://twitter.com/htmlstream">
                <i class="fab fa-twitter"></i>
              </a>
            </li>
            <li class="list-inline-item ml-2">
              <a class="link-dark link-hover-dark" target="_blank" href="https://dribbble.com/htmlstream">
                <i class="fab fa-dribbble"></i>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item ml-md-5 my-2 my-md-0">
          <a class="btn btn-sm btn-primary" href="https://htmlstream.com/templates/docs-ui-kit">
            <i class="fas fa-cloud-download-alt mr-1"></i> Download
          </a>
        </li>
      </ul>
      <!-- End Header Links 2 -->
    </div>
  </div>
</nav>
<!-- End Navbar Light -->
Copy
<!-- Navbar Dark -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="home-page-1.html"><img src="../assets/img/logo-light.png" alt="Docs UI Kit" style="width: 150px;"></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse-2" aria-controls="navbarCollapse-2" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse-2">
      <ul class="navbar-nav ml-auto mr-sm-2 mt-2 mt-lg-0">
        <li class="nav-item active mr-3">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item mr-3">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item mr-3">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item mr-3">
          <a class="nav-link" href="#">Our Work</a>
        </li>
        <li class="nav-item mr-3">
          <a class="nav-link" href="#">Contacts</a>
        </li>
      </ul>

      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img class="rounded-circle u-box-shadow-sm mr-2" width="35" height="35" src="../assets/img-temp/100x100/img3.jpg" alt="Htmlstream"> Ann Dune <i class="fas fa-angle-down small ml-1"></i>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
            <a class="dropdown-item" href="#">Profile</a>
            <a class="dropdown-item" href="#">Account Settings</a>
            <a class="dropdown-item" href="#">Newsletter</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Sign Out</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- End Navbar Dark -->
Copy
<!-- Navbar Transparent -->
<div class="duik-promo gradient-primary" style="height: 500px;">
  <nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
    <div class="container">
      <a class="navbar-brand" href="home-page-1.html"><img src="../assets/img/logo-light.png" alt="Docs UI Kit" style="width: 150px;"></a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse-3" aria-controls="navbarCollapse-3" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarCollapse-3">
        <ul class="navbar-nav ml-auto mt-1 mt-lg-0">
          <li class="nav-item active mx-2">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item mx-2">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item mx-2">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item mx-2">
            <a class="nav-link" href="#">Our Work</a>
          </li>
          <li class="nav-item mx-2">
            <a class="nav-link" href="#">Contacts</a>
          </li>
        </ul>

        <ul class="ml-auto navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img class="rounded-circle u-box-shadow-sm mr-2" width="35" height="35" src="../assets/img-temp/100x100/img1.jpg" alt="Htmlstream"> Nick Gray <i class="fas fa-angle-down small ml-1"></i>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
              <a class="dropdown-item" href="#">Profile</a>
              <a class="dropdown-item" href="#">Account Settings</a>
              <a class="dropdown-item" href="#">Newsletter</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Sign Out</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- SVG BG -->
  <svg class="position-absolute bottom-0 left-0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 323" enable-background="new 0 0 1920 323" xml:space="preserve">
    <polygon fill="#ffffff" style="fill-opacity: .05;" points="-0.5,322.5 -0.5,121.5 658.3,212.3 "></polygon>
    <polygon fill="#ffffff" style="fill-opacity: .1;" points="-2,323 1920,323 1920,-1 "></polygon>
  </svg>
  <!-- End SVG BG -->
</div>
<!-- End Navbar Transparent -->
Copy