Tabs

Tab navigation allows users to switch between multiple sections of content within a single screen.

Class	Type
`tabs`	Tabs	A class representing tabs

Components

Tabs consist of four components:

Class	Type
`tabs-list`	List	-
`tabs-item`	Item	-
`tabs-button`	Button	-
`tabs-button-scroll`	Scroll	Used when there is not enough space to display all tabs, mostly on mobile devices. The `tabs-button-scroll` element can be hidden by adding `u-hide` class to it.


      <div class="tabs" style="width: 350px">

        <button class="tabs-button-scroll is-start" aria-label="Show items in start side">

          <span class="icon-cheveron-left" aria-hidden="true"></span>

        </button>

        <button class="tabs-button-scroll is-end" aria-label="Show items in end side">

          <span class="icon-cheveron-right" aria-hidden="true"></span>

        </button>

        <ul class="tabs-list">

          <li class="tabs-item">

            <a class="tabs-button is-selected" href="#"><span class="text">Overview</span></a>

          </li>

          <li class="tabs-item">

            <a class="tabs-button" href="#"><span class="text">Sessions</span></a>

          </li>

          <li class="tabs-item">

            <a class="tabs-button" href="#"><span class="text">Activity</span></a>

          </li>

          <li class="tabs-item">

            <a class="tabs-button" href="#"><span class="text">Settings</span></a>

          </li>

        </ul>

      </div>

Best Practice

In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users.

If the amount of tabs exceeds the space that is available, adding a horizontal scrolling element is recommended. The right arrow should always be visible. If the user can scroll right, the arrow is active, otherwise the arrow should be disabled. The left arrow should only visible if the user can scroll left.