Tabs

Tabs organize content across different screens, data sets, and other interactions.

Primary tabs

Primary tabs are placed at the top of the content pane under a top app bar. They display the main content destinations. You have to add .active classes to show tab components. Use javascript or your favorite framework to add classes.

              
<!-- tabs -->
<div data-type="tabs-container" class="tabs flex flex-col w-full sm:w-[360px]">
  <!-- tabs header -->
  <div class="relative flex flex-row items-center">
    <button data-type="tabs" data-target="#tab-1" class="active w-1/3 sm:w-[120px] h-16 px-4 py-2 flex flex-col justify-end items-center gap-1 hover:bg-surface-100 dark:hover:bg-surfacedark-100">
      <span class="material-symbols-outlined">music_note</span>
      <span class="text-sm tracking-[.00714em]">Music</span>
    </button>
    <button data-type="tabs" data-target="#tab-2" class="w-1/3 sm:w-[120px] h-16 px-4 py-2 flex flex-col justify-end items-center gap-1 hover:bg-surface-100 dark:hover:bg-surfacedark-100">
      <span class="material-symbols-outlined">image</span>
      <span class="text-sm tracking-[.00714em]">Photos</span>
    </button>
    <button data-type="tabs" data-target="#tab-3" class="w-1/3 sm:w-[120px] h-16 px-4 py-2 flex flex-col justify-end items-center gap-1 hover:bg-surface-100 dark:hover:bg-surfacedark-100">
      <span class="material-symbols-outlined">videocam</span>
      <span class="text-sm tracking-[.00714em]">Video</span>
    </button>
    <!-- indicator -->
    <div data-type="indicator" class="absolute left-0 bottom-0 transition-all duration-200 ease-in-out bg-primary-600 dark:bg-primary-200 w-[40px] ml-[30px] sm:ml-[40px] h-0.5 rounded-t-full"></div>
  </div>
  <hr class="border-gray-200 dark:border-gray-700">
  <!-- tabs content -->
  <div class="flex flex-col">
    <div id="tab-1" role="tabpanel" class="active [&.active]:block hidden py-4 transition duration-400 ease-in-out">
      <h3>Tabs content 1</h3>
    </div> 
    <div id="tab-2" role="tabpanel" class="[&.active]:block hidden py-4 transition duration-400 ease-in-out">
      <h3>Tabs content 2</h3>
    </div>
    <div id="tab-3" role="tabpanel" class="[&.active]:block hidden py-4 transition duration-400 ease-in-out">
      <h3>Tabs content 3</h3>
    </div>
  </div>
</div>

Secondary tabs

Secondary tabs are used within a content area to further separate related content and establish hierarchy.

              
<!-- tabs -->
<div data-type="tabs-container" class="tabs flex flex-col w-full sm:w-[360px]">
  <!-- tabs header -->
  <div class="relative flex flex-row items-center">
    <button data-type="tabs" data-target="#tab-4" class="active w-1/3 sm:w-[120px] h-16 px-4 flex flex-col justify-end items-center gap-1 relative py-2 hover:bg-surface-100 dark:hover:bg-surfacedark-100">
      <span class="material-symbols-outlined">music_note</span>
      <span class="text-sm tracking-[.00714em]">Music</span>
    </button>
    <button data-type="tabs" data-target="#tab-5" class="w-1/3 sm:w-[120px] h-16 px-4 flex flex-col justify-end items-center gap-1 relative py-2 hover:bg-surface-100 dark:hover:bg-surfacedark-100">
      <span class="material-symbols-outlined">image</span>
      <span class="text-sm tracking-[.00714em]">Photos</span>
    </button>
    <button data-type="tabs" data-target="#tab-6" class="w-1/3 sm:w-[120px] h-16 px-4 flex flex-col justify-end items-center gap-1 relative py-2 hover:bg-surface-100 dark:hover:bg-surfacedark-100">
      <span class="material-symbols-outlined">videocam</span>
      <span class="text-sm tracking-[.00714em]">Video</span>
    </button>
    <!-- indicator -->
    <div data-type="indicator" class="absolute left-0 bottom-0 transition-all duration-200 ease-in-out bg-primary-600 dark:bg-primary-200 w-1/3 sm:w-[120px] h-0.5 rounded-t-full"></div>
  </div>
  <hr class="border-gray-200 dark:border-gray-700">
  <!-- tabs content -->
  <div class="flex flex-col">
    <div id="tab-4" role="tabpanel" class="active [&.active]:block hidden py-4 transition duration-400 ease-in-out">
      <h3>Tabs content 1</h3>
    </div> 
    <div id="tab-5" role="tabpanel" class="[&.active]:block hidden py-4 transition duration-400 ease-in-out">
      <h3>Tabs content 2</h3>
    </div>
    <div id="tab-6" role="tabpanel" class="[&.active]:block hidden py-4 transition duration-400 ease-in-out">
      <h3>Tabs content 3</h3>
    </div>
  </div>
</div>