Skip to content
Permalink
main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
title description navigation github prev next
Tailwind CSS Navbar - Material Tailwind
Customise your web projects with our easy-to-use Navbar component for Tailwind CSS using Material Design guidelines.
navbar
required-script
navbar
menu
pagination

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/html@latest/scripts/collapse.js"></script>