Navigation

Tabs

Tabs let users switch between different views or functional sections without leaving the current page. Quanta’s tab component is lightweight, theme-aware, and fully responsive.

Markup

Basic structure consists of:

.quanta-tabs container for tab buttons.
.quanta-tab for each tab; add .active to highlight.
.quanta-tab-content wrapper for panels.
.quanta-tab-panel for each content pane; add .active to show.

<div class="quanta-tabs">
  <button class="quanta-tab active">Tab 1</button>
  <button class="quanta-tab">Tab 2</button>
  <button class="quanta-tab">Tab 3</button>
</div>
<div class="quanta-tab-content">
  <div class="quanta-tab-panel active">Content 1</div>
  <div class="quanta-tab-panel">Content 2</div>
  <div class="quanta-tab-panel">Content 3</div>
</div>

This is the first tab’s content.

Here’s content for tab two.

Finally, tab three content.

Visual Variants

You can tweak appearance with utility classes:

Underline Style (default)

Outline Tabs

Add .quanta-tabs-outline to switch the bottom border into a full outline:

Tab Sizes

Use .quanta-tab-sm or .quanta-tab-lg to adjust padding/font-size.

Responsive Behavior

On mobile (<640px), tabs stack vertically and stretch 100% width.

Accessibility

Ensure each .quanta-tab is a focusable element (e.g. <button>). When toggling tabs via JavaScript, update:

aria-selected="true" on the active tab, and aria-selected="false" on others.
role="tablist" on the .quanta-tabs container.
role="tab" on each tab, and role="tabpanel" on panels.