Tabs

The Tabs component in custom data allows you to organize and display information in a clean, organized manner. Users can easily switch between different sections of content using the tab navigation.

How to implement tabs

To add tabs to your custom data, you'll need to include both the tab navigation and the content containers. The structure consists of two main parts: the tab list and the content panels.

Basic structure

Here's the basic HTML structure you'll need. You can add as many tabs as you want, but need to make sure the link routes to a data-tab div. Use the selected class to provide a default tab — it will then be handled automatically when you switch tabs later on.

<div class="tabs">
  <ul>
    <li class="selected">
        <a href="#tab1">First tab</a>
    </li>
    <li>
        <a href="#tab2">Second tab</a>
    </li>
  </ul>
  <div>
    <div data-tab="tab1" class="selected">
      First tab content
    </div>
    <div data-tab="tab2">
      Second tab content
    </div>
  </div>
</div>

Key components

• The outer tabs class container

• Navigation list with tab triggers

• Content panels with corresponding data-tab attributes

• The selected class for active states