Tabs
<ul class="tabs">
<li class="tabs-item">
<a class="tabs-link active" aria-current="page" href="#">Active</a>
</li>
<li class="tabs-item">
<a class="tabs-link" href="#">Link</a>
</li>
<li class="tabs-item">
<a class="tabs-link" href="#">Link</a>
</li>
<li class="tabs-item">
<a class="tabs-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
Key Features
Active Tab:
.active
class on the<a>
element indicates the currently selected tab.Disabled Tab:
.disabled
class andaria-disabled="true"
attribute makes a tab non-clickable.Accessible: Uses
aria-current
for the active tab andaria-disabled
for the disabled tab, enhancing accessibility.Easy Navigation: A simple structure supports easy navigation through different content sections
Last updated