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

  1. Active Tab: .active class on the <a> element indicates the currently selected tab.

  2. Disabled Tab: .disabled class and aria-disabled="true" attribute makes a tab non-clickable.

  3. Accessible: Uses aria-current for the active tab and aria-disabled for the disabled tab, enhancing accessibility.

  4. Easy Navigation: A simple structure supports easy navigation through different content sections

Last updated