Tabview
Tabview is a JavaScript-powered tab-switching component built on top of the Nav base. It pairs a .nav.is-tabview tab bar with separate .tab-content panel elements and delivers a slideUpFade entrance animation on the revealed panel alongside a smooth sliding underline indicator that tracks the active tab.
Unlike static navigation, Tabview is initialized by the FrontAlign runtime which automatically manages active states, panel visibility, and indicator positioning. A ResizeObserver keeps the underline correctly placed whenever the container is resized.
All Tabview interactions are powered by the FrontAlign runtime.
Quick reference
| Feature | Attribute / Class | Purpose |
|---|---|---|
| Tab bar | .nav.is-tabview | Activates the tab bar layout with a bottom border. |
| JS init | fa-component="tabview" | Required. Marks the element for automatic runtime initialization. |
| Tab target | data-tab | CSS selector pointing to the controlled panel. |
| Panel | .tab-content | Content panel revealed when its tab is activated. |
| Active tab | .is-active | Marks the currently selected tab item. |
| Open panel | .is-open | Makes the panel visible and triggers the entrance animation. |
| Underline indicator | .is-underline | Sliding underline injected automatically by the runtime. |
| Vertical mode | .is-vertical | Switches to a left-side sliding bar indicator. |
| Border color | --tab-border | CSS custom property for the tab bar bottom border color. |
Getting started
Tab items use data-tab to point at their corresponding panel by CSS selector. The fa-component="tabview" attribute is required for the runtime to auto-initialize the component.
<ul class="nav is-tabview" fa-component="tabview">
<li class="nav-item" data-tab="#panel-1">Overview</li>
<li class="nav-item" data-tab="#panel-2">Details</li>
<li class="nav-item" data-tab="#panel-3">Reviews</li>
</ul>
<div id="panel-1" class="tab-content">
<p>Overview content goes here.</p>
</div>
<div id="panel-2" class="tab-content">
<p>Details content goes here.</p>
</div>
<div id="panel-3" class="tab-content">
<p>Reviews content goes here.</p>
</div>
Overview content goes here.
Details content goes here.
Reviews content goes here.
Runtime behavior
| Capability | Description |
|---|---|
Auto-init | Scans the page for all [fa-component="tabview"] elements and initializes each one on load. |
First tab activation | Activates the first tab on init unless a tab already has is-active in the HTML. |
ResizeObserver | Repositions the underline indicator automatically whenever the container is resized. |
Dispose() | Disconnects the observer and frees memory when the component is removed from the DOM. |
Vertical tabview
Add is-vertical to .nav.is-tabview to switch to a vertical tab layout. The runtime detects the modifier automatically — the underline indicator becomes a 4px wide left-side bar that slides vertically instead of horizontally.
<ul class="nav is-tabview is-vertical" fa-component="tabview">
<li class="nav-item" data-tab="#v-panel-1">Profile</li>
<li class="nav-item" data-tab="#v-panel-2">Security</li>
<li class="nav-item" data-tab="#v-panel-3">Billing</li>
</ul>
<div id="v-panel-1" class="tab-content"><p>Profile settings.</p></div>
<div id="v-panel-2" class="tab-content"><p>Security settings.</p></div>
<div id="v-panel-3" class="tab-content"><p>Billing information.</p></div>
Profile settings.
Security settings.
Billing information.
CSS variable theming
| Variable | Default | Description |
|---|---|---|
--nav-text | Inherited | Color of active tab text and the underline indicator. |
--tab-border | oklch(50% 0 0 / 0.15) | Color of the tab bar bottom border. |
<ul class="nav is-tabview" fa-component="tabview"
style="--tab-border: #c7d2fe;">
<li class="nav-item" data-tab="#t1">Design</li>
<li class="nav-item" data-tab="#t2">Code</li>
</ul>
<div id="t1" class="tab-content"><p>Design content.</p></div>
<div id="t2" class="tab-content"><p>Code content.</p></div>
Accessibility
FrontAlign Tabview follows disclosure-style accessibility patterns.
- Use descriptive tab labels so screen readers can identify panel content.
- Avoid hiding critical content inside tabs — ensure it is reachable via keyboard navigation.