Components
Tabs make it easy to switch between different views.
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="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>
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="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>
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-[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>
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-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-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-blue-500 text-sm font-medium whitespace-nowrap text-blue-600" href="#" aria-current="page">
<svg class="w-3.5 h-3.5 text-blue-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-blue-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>
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-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-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-blue-500 text-sm font-medium whitespace-nowrap text-blue-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-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-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover: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-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600" href="#">
Tab 1
</a>
<a class="py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-blue-500 text-sm font-medium whitespace-nowrap text-blue-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-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-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600" href="#">
Tab 1
</a>
<a class="py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-blue-500 text-sm font-medium whitespace-nowrap text-blue-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-blue-600" href="#">
Tab 3
</a>
</nav>
</div>
Vertically stacked navigation.
<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-blue-600" href="#">
Tab 1
</a>
<a class="py-1 pr-4 inline-flex items-center gap-2 border-r-[3px] border-blue-500 text-sm font-medium whitespace-nowrap text-blue-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-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" 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>
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-700">
<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>
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-900 text-sm font-medium text-center overflow-hidden focus:z-10 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 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 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 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" 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>
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" 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>
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" 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" 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" 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>
Example with <nav>-based navigation.
<nav class="flex space-x-2">
<a class="flex-auto 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" 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-blue-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-blue-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>
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" 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" 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" 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>
Example with <nav>-based navigation.
<nav class="flex space-x-2">
<a class="basis-0 grow 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" 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-blue-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-blue-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>
Use the tab JavaScript plugin - to extend our navigational tabs and pills to create tabbable panes of local content.
Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using <button> elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -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 active" id="hs-tab-js-behavior-item-1" data-hs-tab="#hs-tab-js-behavior-1" aria-controls="hs-tab-js-behavior-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -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" id="hs-tab-js-behavior-item-2" data-hs-tab="#hs-tab-js-behavior-2" aria-controls="hs-tab-js-behavior-2" role="tab">
Tab 2
</button>
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -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" id="hs-tab-js-behavior-item-3" data-hs-tab="#hs-tab-js-behavior-3" aria-controls="hs-tab-js-behavior-3" role="tab">
Tab 3
</button>
</nav>
</div>
<div class="mt-3">
<div id="hs-tab-js-behavior-1" role="tabpanel" aria-labelledby="hs-tab-js-behavior-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the first item's tab body.
</p>
</div>
<div id="hs-tab-js-behavior-2" class="hidden" role="tabpanel" aria-labelledby="hs-tab-js-behavior-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the second item's tab body.
</p>
</div>
<div id="hs-tab-js-behavior-3" class="hidden" role="tabpanel" aria-labelledby="hs-tab-js-behavior-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the third item's tab body.
</p>
</div>
</div>
Vertical example.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<div class="flex flex-wrap">
<div class="border-r border-gray-200 dark:border-gray-700">
<nav class="flex flex-col space-y-2" aria-label="Tabs" role="tablist" data-hs-tabs-vertical="true">
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-r-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-r-gray-800 dark:hs-tab-active:text-white -mr-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-l-lg hover:text-gray-700 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 active" id="hs-tab-js-vertical-item-1" data-hs-tab="#hs-tab-js-vertical-1" aria-controls="hs-tab-js-vertical-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-r-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-r-gray-800 dark:hs-tab-active:text-white -mr-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-l-lg hover:text-gray-700 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300" id="hs-tab-js-vertical-item-2" data-hs-tab="#hs-tab-js-vertical-2" aria-controls="hs-tab-js-vertical-2" role="tab">
Tab 2
</button>
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-r-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-r-gray-800 dark:hs-tab-active:text-white -mr-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-l-lg hover:text-gray-700 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300" id="hs-tab-js-vertical-item-3" data-hs-tab="#hs-tab-js-vertical-3" aria-controls="hs-tab-js-vertical-3" role="tab">
Tab 3
</button>
</nav>
</div>
<div class="ml-3">
<div id="hs-tab-js-vertical-1" role="tabpanel" aria-labelledby="hs-tab-js-vertical-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="hs-tab-js-vertical-2" class="hidden" role="tabpanel" aria-labelledby="hs-tab-js-vertical-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="hs-tab-js-vertical-3" class="hidden" role="tabpanel" aria-labelledby="hs-tab-js-vertical-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
</div>
Where long content doesn't fit on the screen, change the tab bar to <select> on mobile.
Resize the example to see it in action.
<select id="tab-select" class="sm:hidden py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" aria-label="Tabs" role="tablist">
<option value="#hs-tab-to-select-1">Tab 1</option>
<option value="#hs-tab-to-select-2">Tab 2</option>
<option value="#hs-tab-to-select-3">Tab 3</option>
</select>
<div class="hidden sm:block border-b border-gray-200 dark:border-gray-700">
<nav class="flex space-x-2" aria-label="Tabs" role="tablist" hs-data-tab-select="#tab-select">
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -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 active" id="hs-tab-to-select-item-1" data-hs-tab="#hs-tab-to-select-1" aria-controls="hs-tab-to-select-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -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" id="hs-tab-to-select-item-2" data-hs-tab="#hs-tab-to-select-2" aria-controls="hs-tab-to-select-2" role="tab">
Tab 2
</button>
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -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" id="hs-tab-to-select-item-3" data-hs-tab="#hs-tab-to-select-3" aria-controls="hs-tab-to-select-3" role="tab">
Tab 3
</button>
</nav>
</div>
<div class="mt-3">
<div id="hs-tab-to-select-1" role="tabpanel" aria-labelledby="hs-tab-to-select-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="hs-tab-to-select-2" class="hidden" role="tabpanel" aria-labelledby="hs-tab-to-select-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="hs-tab-to-select-3" class="hidden" role="tabpanel" aria-labelledby="hs-tab-to-select-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
| Command | Description |
|---|---|
|
ArrowLeft and ArrowRight |
Selects the previous/next non-disabled tab |
|
ArrowUp and ArrowDown in vertical mode |
Selects the previous/next non-disabled tab |
|
Home and End |
Selects the first/last non-disabled tab |
|
Enter |
Activates the selected tab |
| Parameters | Description | Options | Default value |
|---|---|---|---|
data-hs-tab
|
Activate a tab by specifying on an element |
|
| Name | Description |
|---|---|
hs-tab-active:
|
A modifier that allows you to set taiwind classes when the tab is active for toggle and for content |
The HSTabs object is contained within the global window object
| Method | Description |
|---|---|
HSTabs.open($tabToggleEl)
|
Open tab |
| Method | Description |
|---|---|
change.hs.tab
|
Called when any tab is changed. |
Open any dropdown menu event example.
window.addEventListener('change.hs.tab', ($tabToggleEl) => {...})
// OR
HSTabs.on('change', ($tabToggleEl) => {...})
Change specific tab event example.
$tabToggleEl.addEventListener('open.hs.collapse', (evt) => {...})