Tabs

Tabs organise related content into one visible panel at a time. In Nuxt / PLAI use UTabs.

Element	Source
Tab list, inactive tabs, panel surface	Nuxt UI zinc neutrals
Active tab label and underline	CI --ci-color-brand-blue
Focus ring	CI link blue

Live examples

Overview Documents Activity

Summary, parties, and key dates for this case.

Uploaded files and processing status.

Recent edits and sharing events.

Active tab underline: CI brand blue · Inactive tabs: Nuxt UI

Use Arrow Left/Right, Home, and End to move between tabs.

HTML

<div class="ci-tabs" data-ci-tabs>
  <div role="tablist" aria-label="Sections" class="ci-tabs__list">
    <button type="button" role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
      Overview
    </button>
    <button
      type="button"
      role="tab"
      aria-selected="false"
      aria-controls="panel-2"
      id="tab-2"
      tabindex="-1"
    >
      Documents
    </button>
  </div>
  <div role="tabpanel" id="panel-1" aria-labelledby="tab-1">…</div>
  <div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>…</div>
</div>

JavaScript (reference)

The docs site wires tab clicks and arrow-key navigation in pattern-behaviors.js. Production apps should use UTabs with the same ARIA pattern.

Accessibility

• Tab list: role="tablist" with an accessible name (aria-label).
• One tab aria-selected="true"; others tabindex="-1".
• Panels: role="tabpanel", aria-labelledby matching tab id.
• Keyboard: Left/Right arrows, Home, End.

Related patterns

• Accordion — expandable sections (vertical)
• Breadcrumb — hierarchy navigation