Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
States
Variations
A tab can have its items appear as pills.
<div class="ts-tab is-pilled">
<a class="item">Details</a>
<a class="item is-active">Owner</a>
<a class="item">Blocks</a>
<a class="item">Attributes</a>
</div>A secondary tab item can be less prominent.
<div class="ts-tab is-secondary is-pilled">
<a class="item">
<span class="ts-icon is-list-icon"></span>
Transactions
</a>
<a class="item">
<span class="ts-icon is-money-check-dollar-icon"></span>
Transfers
</a>
<a class="item is-active">
<span class="ts-icon is-calendar-day-icon"></span>
Events
</a>
<a class="item">
<span class="ts-icon is-chart-bar-icon"></span>
Analysis
</a>
</div>A tab can have a short indicator that fits within the tab item's length.
<div class="ts-tab is-short-indicated">
<a class="item">Favorites</a>
<a class="item is-active">Music</a>
<a class="item">Video</a>
</div>
<div class="ts-tab is-very-short-indicated">
<a class="item">Favorites</a>
<a class="item is-active">Music</a>
<a class="item">Video</a>
</div>A tab can highlight the active item and fade out the inactive items.
<div class="ts-tab is-highlighted">
<a class="item">Home</a>
<a class="item is-active">Notification</a>
<a class="item">Groups</a>
</div>A tab can take up the full width of its container.
<div class="ts-tab is-fluid">
<a class="item">Profile</a>
<a class="item is-active">Armor</a>
<a class="item">Equipments</a>
<a class="item">Skills</a>
</div>A tab can have its items aligned to the start, center, or end.
<div class="ts-tab is-start-aligned">
<a class="item">Photo</a>
<a class="item is-active">Search</a>
<a class="item">Sharing</a>
</div>
<div class="ts-tab is-center-aligned">
<a class="item">Photo</a>
<a class="item is-active">Search</a>
<a class="item">Sharing</a>
</div>
<div class="ts-tab is-end-aligned">
<a class="item">Photo</a>
<a class="item is-active">Search</a>
<a class="item">Sharing</a>
</div>A tab can vary in size.
<div class="ts-tab is-small is-pilled">
<a class="item">Details</a>
<a class="item is-active">Owner</a>
<a class="item">Blocks</a>
</div>
<div class="ts-tab is-pilled">
<a class="item">Details</a>
<a class="item is-active">Owner</a>
<a class="item">Blocks</a>
</div>
<div class="ts-tab is-large is-pilled">
<a class="item">Details</a>
<a class="item is-active">Owner</a>
<a class="item">Blocks</a>
</div>A tab can have tall items, making the text farther from the indicator in some styles.
<div class="ts-tab">
<a class="item is-active">Discussion</a>
<a class="item">Comics</a>
<a class="item">News</a>
</div>
<div class="ts-tab is-tall">
<a class="item is-active">Discussion</a>
<a class="item">Comics</a>
<a class="item">News</a>
</div>Compositions
A tab can be placed on top of a panel to switch between different sections.
<div class="ts-box">
<div class="ts-content is-fitted is-secondary">
<div class="ts-tab">
<a class="item">Music</a>
<a class="item is-active">Post</a>
<a class="item">Video</a>
</div>
</div>
<div class="ts-divider"></div>
<div class="ts-content">
Hello, world!
</div>
</div>A tab can be placed on top of a table to switch between different views of the items.
| Name | Qty | Amount |
|---|---|---|
| MRI | 1 | $ 40,222 |
| Computed Scan | 1 | $ 20,000 |
| Emission Tomography | 1 | $ 31,000 |
<div class="ts-box">
<div class="ts-content is-dense">
<div class="ts-grid">
<div class="column is-fluid">
<div class="ts-tab is-segmented">
<a class="item">Items</a>
<a class="item is-active">Categories</a>
</div>
</div>
<div class="column">
<button class="ts-button is-outlined is-short is-end-icon">
Edit
<span class="ts-icon is-pen-to-square-icon"></span>
</button>
</div>
</div>
</div>
<div class="ts-divider"></div>
<table class="ts-table">
<thead>
<tr>
<th>Name</th>
<th class="is-end-aligned">Qty</th>
<th class="is-end-aligned">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>MRI</td>
<td class="is-end-aligned">1</td>
<td class="is-end-aligned">$ 40,222</td>
</tr>
<tr>
<td>Computed Scan</td>
<td class="is-end-aligned">1</td>
<td class="is-end-aligned">$ 20,000</td>
</tr>
<tr>
<td>Emission Tomography</td>
<td class="is-end-aligned">1</td>
<td class="is-end-aligned">$ 31,000</td>
</tr>
</tbody>
</table>
</div>JavaScript Features
Click the button with the [data-tab] attribute to switch the element with the [id] attribute.
This is the "Transfer" page.
This is the "Activities" page.
<div class="ts-box">
<div class="ts-tab">
<button class="item" data-tab="tab-transfer">
Transfer
</button>
<button class="item is-active" data-tab="tab-activities">
Activities
</button>
<button class="item" disabled>
Disabled
</button>
</div>
<div class="ts-divider"></div>
<div class="ts-content" id="tab-transfer">
This is the "Transfer" page.
</div>
<div class="ts-content" id="tab-activities">
This is the "Activities" page.
</div>
</div>Looking for similar components?
