Tabs — Lumora

Living Documentation

Tab navigation patterns for segmented workflows and content sections

This page defines Lumora tab patterns for navigation clarity. Explore soft, underline and segmented styles, active/disabled/icon/count states, and generate copy-ready tab markup from the playground.

Variant matrix Layout modes Live controls Copy-ready snippets

Catalog Blocks 6 Variants, layouts, states, composition, snippets, playground

Tab Styles 3 Soft, Underline, Segmented

State Modes 4 Active, Disabled, Icon, Counter

Preview State Soft - Primary Updates from playground toggles

1. Variant Matrix

Canonical tab sets for the three approved style families

Soft Tabs

Overview

Soft tabs are ideal for card-level content switches with subtle visual weight.

Underline Tabs

Pipeline

Underline tabs work best for page-level sectioning and long-form detail views.

Segmented Tabs

Daily

Segmented tabs are compact controls for quick-mode toggling and data range switches.

2. Interaction Playground

Build a tab recipe from state toggles

Style

Accent

Leading icons

Counters

Disable last tab

Justified layout

Live Output

Soft Primary

3. Layout Patterns

Horizontal, justified and scrollable-friendly configurations

Standard Horizontal

Justified

Segmented Range Control

4. State Modeling

Icons, counters, disabled states and active emphasis

Icon Tabs

Counter Tabs

Disabled

5. Composition Patterns

Tabs embedded in cards, forms and table toolbars

Card Header Tabs

User Profile

Form Step Tabs

6. Real-use Snippets

Copy-ready snippets for dashboard and form flows

Soft Tabs

<nav class="tabs-nav tabs-nav--soft">
  <button class="nav-link active">Overview</button>
  <button class="nav-link">Activity</button>
  <button class="nav-link">Security</button>
</nav>

Underline with Icons

<nav class="tabs-nav tabs-nav--underline">
  <button class="nav-link active"><i class="fa-solid fa-chart-line"></i> Analytics</button>
  <button class="nav-link"><i class="fa-solid fa-users"></i> Audience</button>
  <button class="nav-link"><i class="fa-solid fa-gear"></i> Settings</button>
</nav>

Segmented with Counters

<nav class="tabs-nav tabs-nav--segmented">
  <button class="nav-link active">Open <span class="tab-count">12</span></button>
  <button class="nav-link">In Progress <span class="tab-count">4</span></button>
  <button class="nav-link">Done <span class="tab-count">31</span></button>
</nav>