Application toolkit - Navs

Navigation components using Tailwind CSS.

Basic

The base nav component is built with flexbox and provide a strong foundation for building all types of navigation components.

Open this basic navs example in new window
Copy basic navs code 
<nav class="flex space-x-6">
  <a class="py-4 px-1 inline-flex items-center gap-2 text-sm whitespace-nowrap text-blue-500 hover:text-blue-700" href="#">
    Link
  </a>
  <a class="py-4 px-1 inline-flex items-center gap-2 text-sm font-medium whitespace-nowrap text-blue-500 hover:text-blue-700" href="#" aria-current="page">
    Active
  </a>
  <a class="py-4 px-1 inline-flex items-center gap-2 text-sm whitespace-nowrap text-blue-500 hover:text-blue-700" href="#">
    Link
  </a>
  <a class="py-4 px-1 inline-flex items-center gap-2 text-sm whitespace-nowrap text-gray-400 pointer-events-none dark:text-gray-600" href="#">
    Disabled
  </a>
</nav>
Close basic navs code

Classes are used throughout, so your markup can be super flexible. Use <ul>s like below, or <ol> if the order of your items is important.

Open this list navs example in new window
Copy list navs code 
<ul class="list-disc space-x-6">
  <li class="inline-block"><a class="py-4 px-1 inline-flex items-center gap-2 text-sm whitespace-nowrap text-blue-500 hover:text-blue-700" href="#">
      Link
    </a></li>
  <li class="inline-block"><a class="py-4 px-1 inline-flex items-center gap-2 text-sm font-medium whitespace-nowrap text-blue-500 hover:text-blue-700" href="#" aria-current="page">
      Active
    </a></li>
  <li class="inline-block"><a class="py-4 px-1 inline-flex items-center gap-2 text-sm whitespace-nowrap text-blue-500 hover:text-blue-700" href="#">
      Link
    </a></li>
  <li class="inline-block"><a class="py-4 px-1 inline-flex items-center gap-2 text-sm whitespace-nowrap text-gray-400 pointer-events-none dark:text-gray-600" href="#">
      Disabled
    </a></li>
</ul>
Close list navs code

Available styles

Change the style of tabs component with modifiers and utilities. Mix and match as needed, or build your own.

Tabs with underline

A basic form of tabs with underline.

Open this with underline navs example in new window
Copy with underline navs code 
<div class="border-b-2 border-gray-200 dark:border-gray-700">
  <nav class="-mb-0.5 flex space-x-6">
    <a class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 active" href="#" aria-current="page">
      Tab 1
    </a>
    <a class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600" href="#">
      Tab 2
    </a>
    <a class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600" href="#">
      Tab 3
    </a>
  </nav>
</div>
Close with underline navs code

With icons

Contained tabs with icons.

Open this with icons navs example in new window
Copy with icons navs code 
<div class="border-b-2 border-gray-200 dark:border-gray-700">
  <nav class="-mb-0.5 flex space-x-6">
    <a class="py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary-600" href="#">
      <svg class="w-3.5 h-3.5 text-gray-400 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
        <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z" />
      </svg>
      Tab 1
    </a>
    <a class="py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-hs2-primary text-sm font-medium whitespace-nowrap text-hs2-primary-600" href="#" aria-current="page">
      <svg class="w-3.5 h-3.5 text-hs2-primary-600" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
        <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
      </svg>
      Tab 2
    </a>
    <a class="py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary-600" href="#">
      <svg class="w-3.5 h-3.5 text-gray-400 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
        <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z" />
      </svg>
      Tab 3
    </a>
  </nav>
</div>
Close with icons navs code

With badges

Simple example with badges.

Open this with badges navs example in new window
Copy with badges navs code 
<nav class="-mb-0.5 flex space-x-6">
  <a class="py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary-600" href="#">
    Tab 1 <span class="ml-1 py-0.5 px-1.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">99+</span>
  </a>
  <a class="py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-hs2-primary text-sm font-medium whitespace-nowrap text-hs2-primary-600" href="#" aria-current="page">
    Tab 2 <span class="ml-1 py-0.5 px-1.5 rounded-full text-xs font-medium bg-blue-100 text-hs2-primary-600 dark:bg-hs2-primary dark:text-white">99+</span>
  </a>
  <a class="py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary-600" href="#">
    Tab 3
  </a>
</nav>
Close with badges navs code

Horizontal alignment

Centered with .justify-center:

Open this centered navs example in new window
Copy centered navs code 
<div class="border-b-2 border-gray-200 dark:border-gray-700">
  <nav class="-mb-0.5 flex justify-center space-x-6">
    <a class="py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary-600" href="#">
      Tab 1
    </a>
    <a class="py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-hs2-primary text-sm font-medium whitespace-nowrap text-hs2-primary-600" href="#" aria-current="page">
      Tab 2
    </a>
    <a class="py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary-600" href="#">
      Tab 3
    </a>
  </nav>
</div>
Close centered navs code

Right-aligned with .justify-end:

Open this right aligned navs example in new window
Copy right aligned navs code 
<div class="border-b-2 border-gray-200 dark:border-gray-700">
  <nav class="-mb-0.5 flex justify-end space-x-6">
    <a class="py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary-600" href="#">
      Tab 1
    </a>
    <a class="py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-hs2-primary text-sm font-medium whitespace-nowrap text-hs2-primary-600" href="#" aria-current="page">
      Tab 2
    </a>
    <a class="py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary-600" href="#">
      Tab 3
    </a>
  </nav>
</div>
Close right aligned navs code

Vertical

Vertically stacked navigation.

Open this vertical navs example in new window
Copy vertical navs code 
<div class="max-w-[5rem] border-r-2 border-gray-300 dark:border-gray-700">
  <nav class="-mr-0.5 flex flex-col space-y-2">
    <a class="py-1 pr-4 inline-flex items-center gap-2 border-r-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary-600" href="#">
      Tab 1
    </a>
    <a class="py-1 pr-4 inline-flex items-center gap-2 border-r-[3px] border-hs2-primary text-sm font-medium whitespace-nowrap text-hs2-primary-600" href="#" aria-current="page">
      Tab 2
    </a>
    <a class="py-1 pr-4 inline-flex items-center gap-2 border-r-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary-600" href="#">
      Tab 3
    </a>
  </nav>
</div>
Close vertical navs code

Card type tab

Another type of Tabs.

Open this card type navs example in new window
Copy card type navs code 
<div class="border-b border-gray-200 dark:border-gray-700">
  <nav class="flex space-x-2">
    <a class="-mb-px py-3 px-4 inline-flex items-center gap-2 bg-white text-sm font-medium text-center border border-b-transparent text-blue-600 rounded-t-lg dark:bg-gray-800 dark:border-gray-700 dark:border-b-gray-800 dark:hover:text-gray-400" href="#">
      Active
    </a>
    <a class="-mb-px py-3 px-4 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-t-lg hover:text-gray-700 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300" href="#">
      Tab 1
    </a>
    <a class="-mb-px py-3 px-4 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-t-lg hover:text-gray-700 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300" href="#">
      Tab 2
    </a>
  </nav>
</div>
Close card type navs code

Segment

Another type of Tabs with segment.

Open this segment navs example in new window
Copy segment navs code 
<div class="flex">
  <div class="flex bg-gray-100 hover:bg-gray-200 rounded-lg transition p-1 dark:bg-gray-700 dark:hover:bg-gray-600">
    <nav class="flex space-x-2">
      <a class="py-3 px-4 inline-flex items-center gap-2 bg-white text-sm text-gray-700 font-medium rounded-md shadow-sm dark:bg-gray-800 dark:text-gray-400" href="#" aria-current="page">
        Active
      </a>
      <a class="py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm text-gray-500 hover:text-gray-700 font-medium rounded-md hover:hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" href="#">
        Link
      </a>
      <a class="py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm text-gray-500 hover:text-gray-700 font-medium rounded-md hover:hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" href="#">
        Link
      </a>
      <a class="py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm text-gray-400 font-medium rounded-md pointer-events-none dark:text-gray-400 dark:hover:text-white" href="#">
        Disabled
      </a>
    </nav>
  </div>
</div>
Close segment navs code

Pills on gray colour

Another type of Tabs with pills on gray color.

Open this pills gray colour navs example in new window
Copy pills gray colour navs code 
<nav class="flex space-x-2">
  <a class="py-3 px-4 inline-flex items-center gap-2 bg-gray-200 text-sm font-medium text-center text-gray-800 rounded-lg dark:bg-gray-700 dark:text-white" href="#">
    Active
  </a>
  <a class="py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-blue-600 dark:hover:text-gray-400" href="#">
    Link
  </a>
  <a class="py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-blue-600 dark:hover:text-gray-400" href="#">
    Link
  </a>
  <a class="py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-400 rounded-lg pointer-events-none dark:text-gray-600" href="#">
    Disabled
  </a>
</nav>
Close pills gray colour navs code

Pills with brand color

Another type of Tabs with pills.

Open this pills with brand colour navs example in new window
Copy pills with brand colour navs code 
<nav class="flex space-x-2">
  <a class="py-3 px-4 inline-flex items-center gap-2 bg-hs2-primary-500 text-sm font-medium text-center text-white rounded-lg" href="#">
    Active
  </a>
  <a class="py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary-600 dark:hover:text-gray-400" href="#">
    Link
  </a>
  <a class="py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary-600 dark:hover:text-gray-400" href="#">
    Link
  </a>
  <a class="py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-400 rounded-lg pointer-events-none dark:text-gray-600" href="#">
    Disabled
  </a>
</nav>
Close pills with brand colour navs code

Fill and justify

Force your nav's contents to extend the full available width one of two modifier classes. Notice that all horizontal space is occupied, but not every nav item has the same width.

Open this fill and justify navs example in new window
Copy fill and justify navs code 
<ul class="flex space-x-2">
  <li class="flex-auto">
    <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 bg-hs2-primary text-sm font-medium text-center text-white rounded-lg" href="#">
      Active
    </a>
  </li>
  <li class="flex-auto">
    <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary-600 dark:hover:text-gray-400" href="#">
      Much longer link
    </a>
  </li>
  <li class="flex-auto">
    <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary-600 dark:hover:text-gray-400" href="#">
      Link
    </a>
  </li>
  <li class="flex-auto">
    <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-400 rounded-lg pointer-events-none dark:text-gray-600" href="#">
      Disabled
    </a>
  </li>
</ul>
Close fill and justify navs code

Example with <nav>-based navigation.

Open this fill and justify nav based navs example in new window
Copy fill and justify nav based navs code 
<nav class="flex space-x-2">
  <a class="flex-auto py-3 px-4 inline-flex justify-center items-center gap-2 bg-hs2-primary-500 text-sm font-medium text-center text-white rounded-lg" href="#">
    Active
  </a>
  <a class="flex-auto py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary-600 dark:hover:text-gray-400" href="#">
    Much longer link
  </a>
  <a class="flex-auto py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary-600 dark:hover:text-gray-400" href="#">
    Link
  </a>
  <a class="flex-auto py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-400 rounded-lg pointer-events-none dark:text-gray-600" href="#">
    Disabled
  </a>
</nav>
Close fill and justify nav based navs code

Equal-width elements

All horizontal space will be occupied by nav links, but unlike the example above, every nav item will be the same width.

Open this equal width navs example in new window
Copy equal width navs code 
<ul class="flex space-x-2">
  <li class="basis-0 grow">
    <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 bg-hs2-primary text-sm font-medium text-center text-white rounded-lg" href="#">
      Active
    </a>
  </li>
  <li class="basis-0 grow">
    <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary-600 dark:hover:text-gray-400" href="#">
      Much longer link
    </a>
  </li>
  <li class="basis-0 grow">
    <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary-600 dark:hover:text-gray-400" href="#">
      Link
    </a>
  </li>
  <li class="basis-0 grow">
    <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-400 rounded-lg pointer-events-none dark:text-gray-600" href="#">
      Disabled
    </a>
  </li>
</ul>
Close equal width navs code

Example with <nav>-based navigation.

Open this equal width nav based navs example in new window
Copy equal width nav based navs code 
<nav class="flex space-x-2">
  <a class="basis-0 grow py-3 px-4 inline-flex justify-center items-center gap-2 bg-hs2-primary text-sm font-medium text-center text-white rounded-lg" href="#">
    Active
  </a>
  <a class="basis-0 grow py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary-600 dark:hover:text-gray-400" href="#">
    Much longer link
  </a>
  <a class="basis-0 grow py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary-600 dark:hover:text-gray-400" href="#">
    Link
  </a>
  <a class="basis-0 grow py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-400 rounded-lg pointer-events-none dark:text-gray-600" href="#">
    Disabled
  </a>
</nav>
Close equal width nav based navs code