Tailwind CSS Navbar

Use our responsive Tailwind CSS navigation for your website. You can add links, icons, links with icons, search bars, and brand text.

See below our simple navbar example that you can use in your Tailwind CSS project.


<nav class="navbar w-full bg-white">
  <div class="container-lg px-0">
    <div class="flex w-full items-center">
      <a class="nav-brand mr-auto ml-0" href="#">Material Tailwind</a>
      <button
        navbar-trigger=""
        class="navbar-trigger ml-auto mr-0 mb-0 block lg:hidden"
        type="button"
        aria-controls="navigation"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-trigger-icon">
          <span bar1="" class="navbar-trigger-bar mt-1"
            ><span class="hidden origin-[10%_10%] rotate-45"></span
          ></span>
          <span bar2="" class="bar2 navbar-trigger-bar mt-2"></span>
          <span bar3="" class="bar3 navbar-trigger-bar mt-2"
            ><span
              class="mt-mt-[0.4375rem] hidden origin-[10%_90%] -rotate-45"
            ></span
          ></span>
        </span>
      </button>
    </div>
    <div class="collapse navbar-collapse" navbar-menu="">
      <ul class="navbar-nav">
        <li>
          <a class="nav-link" aria-current="page" href="#">
            <i class="material-icons mr-2 text-base opacity-60">article</i>
            <span>Documantation</span>
          </a>
        </li>
        <li>
          <a class="nav-link" href="#">
            <i class="material-icons mr-2 text-base opacity-60">apps</i>
            <span>Components</span>
          </a>
        </li>
        <li class="flex">
          <a class="nav-link" href="#">
            <i class="material-icons mr-2 text-base opacity-60"
              >view_carousel</i
            >
            <span>Templates</span>
          </a>
        </li>
        <li>
          <a class="nav-link" href="#">
            <i class="fab fa-github mr-2 text-base opacity-60"></i>
            <span>Github</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Required Scrips

The navbar component needs a required script file to work, you just need to add the below script file to the bottom of your html file.

<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html/scripts/collapse.js"></script>
 
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/[email protected]/scripts/collapse.js"></script>
Edit this page on Github