Navs & Tabs
Navigation components using Tailwind CSS.
Example
The base nav component is built with flexbox and provide a strong foundation for building all types of navigation components.
Tabs
The base nav component is built with flexbox and provide a strong foundation for building all types of navigation components.
<nav class="flex border-b border-gray-300">
<a
class="px-4 py-3 -mb-px border-gray-300 border
rounded-t-md inline-flex items-center gap-x-2 text-base font-semibold
whitespace-nowrap text-indigo-600 hover:text-indigo-70 focus:outline-none
focus:text-indigo-700"
href="#"
aria-current="page"
>
Active
</a>
<a
class="px-4 py-3 hover:-mb-px
hover:border-gray-300 hover:border hover:rounded-t-md inline-flex items-center
gap-x-2 text-base whitespace-nowrap text-indigo-600 hover:text-indigo-70
focus:outline-none focus:text-indigo-700"
href="#"
>
Link
</a>
<a
class="px-4 py-3 hover:-mb-px
hover:border-gray-300 hover:border hover:rounded-t-md inline-flex items-center
gap-x-2 text-base whitespace-nowrap text-indigo-600 hover:text-indigo-70
focus:outline-none focus:text-indigo-700"
href="#"
>
Link
</a>
<a
class="px-4 py-3 hover:-mb-px
hover:border-gray-300 hover:border hover:rounded-t-md inline-flex items-center
gap-x-2 text-base whitespace-nowrap text-gray-600 hover:text-indigo-70
focus:outline-none focus:text-indigo-700 opacity-50 pointer-events-none"
href="#"
>
Disabled
</a>
</nav>Javascript Behaviour Tabs
The base nav component is built with flexbox and provide a strong foundation for building all types of navigation components.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit ligula, cursus at
orci at, condimentum dignissim dolor. Morbi elit lacus, posuere id urna et,
elementum malesuada erat.
Duis metus nisl, varius non mauris sed, commodo sodales arcu. Quisque in tellus
semper, tincidunt tortor ut, varius purus. Aliquam erat volutpat.
Mauris sed interdum elit, in sagittis erat. Aliquam sed venenatis nibh. Sed
malesuada ornare leo, et consectetur arcu placerat eget. Praesent quam massa,
vulputate sed ligula quis, aliquet rutrum enim.
<ul class="nav nav-tabs mb-3 border-b
border-gray-300" id="pills-tab2" role="tablist">
<li class="nav-item" role="presentation">
<a
class="nav-link px-5 py-3 rounded-t-md border
border-white hover:border-gray-300 active"
id="pills-active-example1-tab"
data-bs-toggle="pill"
href="#pills-active-example1"
type="button"
role="tab"
aria-controls="pills-active-example1"
aria-selected="true"
>
Active
</a>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link px-5 py-3 rounded-t-md border
border-white hover:border-gray-300"
id="pills-link1-example1-tab"
data-bs-toggle="pill"
href="#pills-link1-example1"
type="button"
role="tab"
aria-controls="pills-link1-example1"
aria-selected="false"
>
Link
</a>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link px-5 py-3 rounded-t-md border
border-white hover:border-gray-300"
id="pills-link2-example1-tab"
data-bs-toggle="pill"
href="#pills-link2-example1"
type="button"
role="tab"
aria-controls="pills-link2-example1"
aria-selected="false"
>
Link
</a>
</li>
</ul>
<div class="tab-content py-6" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-active-example1" role="tabpanel" aria-labelledby="pills-active-example1" tabindex="0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit ligula, cursus at
orci at, condimentum dignissim dolor. Morbi elit lacus, posuere id urna et,
elementum
malesuada erat.
</div>
<div class="tab-pane fade" id="pills-link1-example1" role="tabpanel" aria-labelledby="pills-link1-example1" tabindex="0">
Duis metus nisl, varius non mauris sed, commodo sodales arcu. Quisque in tellus
semper, tincidunt tortor ut, varius purus. Aliquam erat volutpat.
</div>
<div class="tab-pane fade" id="pills-link2-example1" role="tabpanel" aria-labelledby="pills-link2-example1" tabindex="0">
Mauris sed interdum elit, in sagittis erat. Aliquam sed venenatis nibh. Sed
malesuada ornare leo, et consectetur arcu placerat eget. Praesent quam massa,
vulputate sed
ligula quis, aliquet rutrum enim.
</div>
</div>