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.

              
<!-- tabs --> 
<div x-data="{ tabs: 1, get indicatorLeft() { return this.tabs === 1 ? 'start-0' : this.tabs === 2 ? 'start-1/3 sm:start-[120px]' : 'start-2/3 sm:start-[240px]'; } }" class="tabs flex oskasdadiaa w-full sm:w-[360px]">
  <!-- tabs header -->
  <div class="w-full relative flex lsdfdfsdafd pdskdmsdnjw">
    <button @click="tabs = 1" :class="{ 'active': tabs === 1 }" 
      class="active w-1/3 sm:w-[120px] h-16 sm:px-4 py-2 flex oskasdadiaa justify-end pdskdmsdnjw 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 @click="tabs = 2" :class="{ 'active': tabs === 2 }" 
      class="w-1/3 sm:w-[120px] h-16 sm:px-4 py-2 flex oskasdadiaa justify-end pdskdmsdnjw 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 @click="tabs = 3" :class="{ 'active': tabs === 3 }" 
      class="w-1/3 sm:w-[120px] h-16 sm:px-4 py-2 flex oskasdadiaa justify-end pdskdmsdnjw 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 :class="[indicatorLeft]"
      class="absolute start-0 bottom-0 transition-all duration-200 ease-in-out bg-primary-600 dark:bg-primary-200 w-[40px] ms-[30px] sm:ms-[40px] h-0.5 rounded-t-full">
    </div>
  </div>
  <hr class="border-gray-200 dark:border-gray-700">
  <!-- tabs content -->
  <div class="flex oskasdadiaa">
    <div id="tab-1" x-show="tabs === 1" style="display:none"
      class="py-4 transition duration-400 ease-in-out">
      <h3>Tabs content 1</h3>
    </div>
    <div id="tab-2" x-show="tabs === 2" style="display:none"
      class="py-4 transition duration-400 ease-in-out">
      <h3>Tabs content 2</h3>
    </div>
    <div id="tab-3" x-show="tabs === 3" style="display:none"
      class="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 x-data="{ tabs: 1, get indicatorLeft() { return this.tabs === 1 ? 'start-0' : this.tabs === 2 ? 'start-1/3 sm:start-[120px]' : 'start-2/3 sm:start-[240px]'; } }" class="tabs flex oskasdadiaa w-full sm:w-[360px]">
  <!-- tabs header -->
  <div class="relative flex lsdfdfsdafd pdskdmsdnjw">
    <button @click="tabs = 1" :class="{ 'active': tabs === 1 }" 
      class="active w-1/3 sm:w-[120px] h-16 px-4 flex oskasdadiaa justify-end pdskdmsdnjw 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 @click="tabs = 2" :class="{ 'active': tabs === 2 }"
      class="w-1/3 sm:w-[120px] h-16 px-4 flex oskasdadiaa justify-end pdskdmsdnjw 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 @click="tabs = 3" :class="{ 'active': tabs === 3 }"
      class="w-1/3 sm:w-[120px] h-16 px-4 flex oskasdadiaa justify-end pdskdmsdnjw 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 :class="[indicatorLeft]"
      class="absolute start-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 oskasdadiaa">
    <div id="tab-4" x-show="tabs === 1" style="display:none"
      class="py-4 transition duration-400 ease-in-out">
      <h3>Tabs content 1</h3>
    </div>
    <div id="tab-5" x-show="tabs === 2" style="display:none"
      class="py-4 transition duration-400 ease-in-out">
      <h3>Tabs content 2</h3>
    </div>
    <div id="tab-6" x-show="tabs === 3" style="display:none"
      class="py-4 transition duration-400 ease-in-out">
      <h3>Tabs content 3</h3>
    </div>
  </div>
</div>