Tailwind CSS Navs & Tabs
Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container
Base Nav
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 whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700" href="#">Link</a>
<a
class="inline-flex items-center gap-x-2 font-semibold whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700"
href="#"
aria-current="page"
>
Active
</a>
<a class="inline-flex items-center gap-x-2 whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700" href="#">Link</a>
<a
class="inline-flex items-center gap-x-2 whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700 opacity-50 pointer-events-none"
href="#"
>
Disabled
</a>
</nav>Horizontal alignment
Change the horizontal alignment of your nav with flexbox utilities.
with
.justify-center
<nav class="flex space-x-6 justify-center">
<a class="inline-flex items-center gap-x-2 whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700" href="#">Link</a>
<a
class="inline-flex items-center gap-x-2 font-semibold whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700"
href="#"
aria-current="page"
>
Active
</a>
<a class="inline-flex items-center gap-x-2 whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700" href="#">Link</a>
<a
class="inline-flex items-center gap-x-2 whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700 opacity-50 pointer-events-none"
href="#"
>
Disabled
</a>
</nav>
with
.justify-end
<nav class="flex space-x-6 justify-end">
<a class="inline-flex items-center gap-x-2 whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700" href="#">Link</a>
<a
class="inline-flex items-center gap-x-2 font-semibold whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700"
href="#"
aria-current="page"
>
Active
</a>
<a class="inline-flex items-center gap-x-2 whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700" href="#">Link</a>
<a
class="inline-flex items-center gap-x-2 whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700 opacity-50 pointer-events-none"
href="#"
>
Disabled
</a>
</nav>Vertical
Vertically stacked navigation.
<nav class="flex flex-col space-y-3">
<a class="inline-flex items-center gap-x-2 whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700" href="#">Link</a>
<a
class="inline-flex items-center gap-x-2 font-semibold whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700"
href="#"
aria-current="page"
>
Active
</a>
<a class="inline-flex items-center gap-x-2 whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700" href="#">Link</a>
<a
class="inline-flex items-center gap-x-2 whitespace-nowrap text-green-600 hover:text-green-700 focus:outline-none focus:text-green-700 opacity-50 pointer-events-none"
href="#"
>
Disabled
</a>
</nav>Tabs
Use the following default tabs component example to show a list of links that the user can navigate from on your website.
<div class="border-b border-gray-200">
<nav class="flex space-x-2">
<a class="-mb-px py-2 px-4 inline-flex items-center gap-2 bg-white text-center border border-b-transparent text-green-600 rounded-t-lg" href="#" aria-current="page">
Active
</a>
<a class="-mb-px py-2 px-4 inline-flex items-center gap-2 bg-gray-100 text-center border text-gray-800 rounded-t-lg hover:text-gray-900" href="#">Tab 1</a>
<a class="-mb-px py-2 px-4 inline-flex items-center gap-2 bg-gray-100 text-center border text-gray-800 rounded-t-lg hover:text-gray-900" href="#">Tab 2</a>
</nav>
</div>Pills
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-green-600 text-center text-white rounded-lg" href="#" aria-current="page">Active</a>
<a class="py-3 px-4 inline-flex items-center gap-2 bg-transparent text-center text-gray-500 rounded-lg hover:text-green-600" href="#">Link</a>
<a class="py-3 px-4 inline-flex items-center gap-2 bg-transparent text-center text-gray-500 rounded-lg hover:text-green-600" href="#">Link</a>
<a class="py-3 px-4 inline-flex items-center gap-2 bg-transparent text-center text-gray-400 rounded-lg pointer-events-none" href="#">Disabled</a>
</nav>JavaScript behavior
Use the tab JavaScript plugin.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis nisi quidem provident pariatur minima corrupti consequuntur atque repudiandae tempora? Nostrum repellendus assumenda doloremque eum tempora enim similique quam dolorum architecto dolor, necessitatibus in reprehenderit vitae.
Perferendis nisi quidem provident pariatur minima corrupti consequuntur atque repudiandae tempora? Nostrum repellendus assumenda doloremque eum tempora enim similique quam dolorum architecto dolor, necessitatibus in reprehenderit vitae.
Nostrum repellendus assumenda doloremque eum tempora enim similique quam dolorum architecto dolor, necessitatibus in reprehenderit vitae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum eligendi aut et eos quisquam.
<nav class="flex space-x-2 border-b border-gray-200 mb-4 nav-default" id="pillsTabs" role="tablist">
<a
class="-mb-px py-2 px-4 inline-flex items-center gap-2 bg-gray-100 text-center border text-gray-800 rounded-t-lg hover:text-gray-900 active"
id="pills-navsTabsActive-tab"
data-bs-toggle="tab"
href="#pills-navsTabsActive"
role="tab"
aria-controls="pills-navsTabsActive"
aria-selected="true"
>
Active
</a>
<a
class="-mb-px py-2 px-4 inline-flex items-center gap-2 bg-gray-100 text-center border text-gray-800 rounded-t-lg hover:text-gray-900"
id="pills-navsTabsOne-tab"
data-bs-toggle="tab"
href="#pills-navsTabsOne"
role="tab"
aria-controls="pills-navsTabsOne"
aria-selected="false"
>
Tab 1
</a>
<a
class="-mb-px py-2 px-4 inline-flex items-center gap-2 bg-gray-100 text-center border text-gray-800 rounded-t-lg hover:text-gray-900"
id="pills-navsTabsTwo-tab"
data-bs-toggle="tab"
href="#pills-navsTabsTwo"
role="tab"
aria-controls="pills-navsTabsTwo"
aria-selected="false"
>
Tab 2
</a>
</nav>
<div class="tab-content" id="pillsTabsContent">
<div class="tab-pane fade show active" id="pills-navsTabsActive" role="tabpanel" aria-labelledby="pills-navsTabsActive-tab">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis nisi quidem provident pariatur minima corrupti consequuntur atque repudiandae tempora? Nostrum
repellendus assumenda doloremque eum tempora enim similique quam dolorum architecto dolor, necessitatibus in reprehenderit vitae.
</p>
</div>
<div class="tab-pane fade" id="pills-navsTabsOne" role="tabpanel" aria-labelledby="pills-navsTabsOne-tab">
<p>
Perferendis nisi quidem provident pariatur minima corrupti consequuntur atque repudiandae tempora? Nostrum repellendus assumenda doloremque eum tempora enim similique
quam dolorum architecto dolor, necessitatibus in reprehenderit vitae.
</p>
</div>
<div class="tab-pane fade" id="pills-navsTabsTwo" role="tabpanel" aria-labelledby="pills-navsTabsTwo-tab">
<p>
Nostrum repellendus assumenda doloremque eum tempora enim similique quam dolorum architecto dolor, necessitatibus in reprehenderit vitae. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Ipsum eligendi aut et eos quisquam.
</p>
</div>
</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis nisi quidem provident pariatur minima corrupti consequuntur atque repudiandae tempora? Nostrum repellendus assumenda doloremque eum tempora enim similique quam dolorum architecto dolor, necessitatibus in reprehenderit vitae.
Perferendis nisi quidem provident pariatur minima corrupti consequuntur atque repudiandae tempora? Nostrum repellendus assumenda doloremque eum tempora enim similique quam dolorum architecto dolor, necessitatibus in reprehenderit vitae.
Nostrum repellendus assumenda doloremque eum tempora enim similique quam dolorum architecto dolor, necessitatibus in reprehenderit vitae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum eligendi aut et eos quisquam.
<ul class="flex flex-wrap nav-pills-light" id="pillsTabs" role="tablist">
<li class="nav-item">
<a
class="nav-link active"
id="pills-navsTabspillsActive-tab"
data-bs-toggle="tab"
href="#pills-navsTabspillsActive"
role="tab"
aria-controls="pills-navsTabspillsActive"
aria-selected="true"
>
Active
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="pills-navsTabspillsOne-tab"
data-bs-toggle="tab"
href="#pills-navsTabspillsOne"
role="tab"
aria-controls="pills-navsTabspillsOne"
aria-selected="false"
>
Tab 1
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="pills-navsTabspillsTwo-tab"
data-bs-toggle="tab"
href="#pills-navsTabspillsTwo"
role="tab"
aria-controls="pills-navsTabspillsTwo"
aria-selected="false"
>
Tab 2
</a>
</li>
</ul>
<div class="tab-content mt-6" id="pillsTabsContent">
<div class="tab-pane fade show active" id="pills-navsTabspillsActive" role="tabpanel" aria-labelledby="pills-navsTabspillsActive-tab">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis nisi quidem provident pariatur minima corrupti consequuntur atque repudiandae tempora? Nostrum
repellendus assumenda doloremque eum tempora enim similique quam dolorum architecto dolor, necessitatibus in reprehenderit vitae.
</p>
</div>
<div class="tab-pane fade" id="pills-navsTabspillsOne" role="tabpanel" aria-labelledby="pills-navsTabspillsOne-tab">
<p>
Perferendis nisi quidem provident pariatur minima corrupti consequuntur atque repudiandae tempora? Nostrum repellendus assumenda doloremque eum tempora enim similique
quam dolorum architecto dolor, necessitatibus in reprehenderit vitae.
</p>
</div>
<div class="tab-pane fade" id="pills-navsTabspillsTwo" role="tabpanel" aria-labelledby="pills-navsTabspillsTwo-tab">
<p>
Nostrum repellendus assumenda doloremque eum tempora enim similique quam dolorum architecto dolor, necessitatibus in reprehenderit vitae. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Ipsum eligendi aut et eos quisquam.
</p>
</div>
</div>