Skip to main content

Back to all patterns

Tabset

ID: tabset Category: navigation Required slots: tabs

Live example

Overview content panel for related record details.

Overview

Horizontal tab navigation for related views.

Read more

Horizontal tab navigation for related views.

Tags: navigation, tabset

When to use / When not to use

When to use

  • This pattern appears frequently in the navigation category and has reusable slot anatomy.

When not to use

  • Avoid this pattern when a simpler native element can meet the same user goal with less cognitive load.

Accessibility notes

  • Keyboard keys: .
  • ARIA attributes: .
  • Visible focus required: No.

Implementation 

<x-ui.tabset :tabs="[['id'=>'overview','label'=>'Overview'],['id'=>'activity','label'=>'Activity']]" active="overview">
  <section id="panel-overview" role="tabpanel" aria-labelledby="tab-overview" class="dig-stack">
    <p>Overview content panel for related record details.</p>
  </section>
  <section id="panel-activity" role="tabpanel" aria-labelledby="tab-activity" hidden class="dig-stack">
    <p>Activity content panel with timeline and recent updates.</p>
  </section>
</x-ui.tabset>
Object Console