Components
Navigation components using Tailwind CSS.
The base nav component is built with flexbox and provide a strong foundation for building all types of navigation components.
<nav class="flex space-x-6">
<a class="inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-blue-600 hover:text-blue-70 focus:outline-none focus:text-blue-700 dark:text-blue-500 dark:focus:text-blue-400" href="#">
Link
</a>
<a class="inline-flex items-center gap-x-2 text-sm font-semibold whitespace-nowrap text-blue-600 hover:text-blue-70 focus:outline-none focus:text-blue-700 dark:text-blue-500 dark:focus:text-blue-400" href="#" aria-current="page">
Active
</a>
<a class="inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-blue-600 hover:text-blue-70 focus:outline-none focus:text-blue-700 dark:text-blue-500 dark:focus:text-blue-400" href="#">
Link
</a>
<a class="inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-blue-600 hover:text-blue-70 focus:outline-none focus:text-blue-700 opacity-50 pointer-events-none dark:text-blue-500 dark:focus:text-blue-400" href="#">
Disabled
</a>
</nav>
Classes are used throughout, so your markup can be super flexible. Use <ul>
s like above, <ol>
if the order of your items is important.
<ul class="list-disc space-x-6">
<li class="inline-block"><a class="inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-blue-600 hover:text-blue-70 focus:outline-none focus:text-blue-700 dark:text-blue-500 dark:focus:text-blue-400" href="#">
Link
</a></li>
<li class="inline-block"><a class="inline-flex items-center gap-x-2 text-sm font-semibold whitespace-nowrap text-blue-600 hover:text-blue-70 focus:outline-none focus:text-blue-700 dark:text-blue-500 dark:focus:text-blue-400" href="#" aria-current="page">
Active
</a></li>
<li class="inline-block"><a class="inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-blue-600 hover:text-blue-70 focus:outline-none focus:text-blue-700 dark:text-blue-500 dark:focus:text-blue-400" href="#">
Link
</a></li>
<li class="inline-block"><a class="inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-blue-600 hover:text-blue-70 focus:outline-none focus:text-blue-700 opacity-50 pointer-events-none dark:text-blue-500 dark:focus:text-blue-400" href="#">
Disabled
</a></li>
</ul>
Change the style of tabs component with modifiers and utilities. Mix and match as needed, or build your own.
A basic form of tabs with underline.
<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-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus: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-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus: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-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
Tab 3
</a>
</nav>
</div>
Contained tabs with icons.
<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-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
Tab 1
</a>
<a class="py-4 px-1 inline-flex items-center gap-2 border-b-2 border-blue-500 text-sm font-medium whitespace-nowrap text-blue-600 focus:outline-none focus:text-blue-800" href="#" aria-current="page">
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
Tab 2
</a>
<a class="py-4 px-1 inline-flex items-center gap-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
Tab 3
</a>
</nav>
</div>
Simple example with badges.
<nav class="-mb-0.5 flex space-x-6">
<a class="py-4 px-1 inline-flex items-center gap-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
Tab 1 <span class="ms-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-2 border-blue-500 text-sm font-medium whitespace-nowrap text-blue-600 focus:outline-none focus:text-blue-800" href="#" aria-current="page">
Tab 2 <span class="ms-1 py-0.5 px-1.5 rounded-full text-xs font-medium bg-blue-100 text-blue-600 dark:bg-blue-500 dark:text-white">99+</span>
</a>
<a class="py-4 px-1 inline-flex items-center gap-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
Tab 3
</a>
</nav>
Centered with .justify-center
:
<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-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
Tab 1
</a>
<a class="py-4 px-1 inline-flex items-center gap-2 border-b-2 border-blue-500 text-sm font-medium whitespace-nowrap text-blue-600 focus:outline-none focus:text-blue-800" href="#" aria-current="page">
Tab 2
</a>
<a class="py-4 px-1 inline-flex items-center gap-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
Tab 3
</a>
</nav>
</div>
Right-aligned with .justify-end
:
<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-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
Tab 1
</a>
<a class="py-4 px-1 inline-flex items-center gap-2 border-b-2 border-blue-500 text-sm font-medium whitespace-nowrap text-blue-600 focus:outline-none focus:text-blue-800" href="#" aria-current="page">
Tab 2
</a>
<a class="py-4 px-1 inline-flex items-center gap-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
Tab 3
</a>
</nav>
</div>
Vertically stacked navigation.
<div class="max-w-20 border-e-2 border-gray-300 dark:border-gray-700">
<nav class="-me-0.5 flex flex-col space-y-2">
<a class="py-1 pe-4 inline-flex items-center gap-2 border-e-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
Tab 1
</a>
<a class="py-1 pe-4 inline-flex items-center gap-2 border-e-2 border-blue-500 text-sm font-medium whitespace-nowrap text-blue-600 focus:outline-none focus:text-blue-800" href="#" aria-current="page">
Tab 2
</a>
<a class="py-1 pe-4 inline-flex items-center gap-2 border-e-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
Tab 3
</a>
</nav>
</div>
Another type of Tabs.
<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 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
Tab 2
</a>
</nav>
</div>
Another type of Tabs with segment.
<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-lg shadow-sm dark:bg-gray-800 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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-lg hover:hover:text-blue-600 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 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-lg hover:hover:text-blue-600 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 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-lg pointer-events-none dark:text-gray-400 dark:hover:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
Disabled
</a>
</nav>
</div>
</div>
Another type of Tabs with underlined bar.
<nav class="relative z-0 flex border rounded-xl divide-x divide-gray-200 overflow-hidden dark:border-gray-700 dark:divide-gray-700">
<a class="group relative min-w-0 flex-1 bg-white py-4 px-4 border-b-2 border-b-blue-600 text-gray-800 text-sm font-medium text-center overflow-hidden focus:z-10 focus:outline-none focus:text-blue-600 dark:bg-gray-800 dark:text-gray-300" aria-current="page" href="#">
Active
</a>
<a class="group relative min-w-0 flex-1 bg-white py-4 px-4 text-gray-500 hover:text-gray-700 text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 focus:outline-none focus:text-blue-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-gray-400" href="#">
Link
</a>
<a class="group relative min-w-0 flex-1 bg-white py-4 px-4 text-gray-500 hover:text-gray-700 text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 focus:outline-none focus:text-blue-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-gray-400" href="#">
Link
</a>
<a class="group relative min-w-0 flex-1 bg-white py-4 px-4 text-gray-400 text-sm font-medium text-center pointer-events-none overflow-hidden focus:z-10 focus:outline-none dark:bg-gray-800 dark:text-gray-600" href="#">
Disabled
</a>
</nav>
Another type of Tabs with pills on gray color.
<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 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
Disabled
</a>
</nav>
Another type of Tabs with pills.
<nav class="flex space-x-2">
<a class="py-3 px-4 inline-flex items-center gap-2 bg-blue-600 text-sm font-medium text-center text-white rounded-lg dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
Disabled
</a>
</nav>
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.
Example with <ul>
-based navigation.
<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-blue-600 text-sm font-medium text-center text-white rounded-lg dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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-blue-600 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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-blue-600 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
Disabled
</a>
</li>
</ul>
Example with <nav>
-based navigation.
All horizontal space will be occupied by nav links, but unlike the example above, every nav item will be the same width.
<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-blue-600 text-sm font-medium text-center text-white rounded-lg dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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-blue-600 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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-blue-600 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" 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 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
Disabled
</a>
</li>
</ul>
Example with <nav>
-based navigation.