Menu

Tabs

v1.0.0
Tabs make it easy to switch between different views.
Default

Use .tabs with .tab to create a tab navigation. Add .is-active to mark the active tab and matching tab content.

Content Tab 1
Content Tab 2
Content Tab 3
Content Tab 4
Content Tab 5
<div>
	<div class="tabs">
		<button class="tab is-active" type="button">Tab 1</button>
		<button class="tab" type="button">Tab 2</button>
		<button class="tab" type="button">Tab 3</button>
		<button class="tab" type="button">Tab 4</button>
		<button class="tab" type="button" disabled>Tab 5</button>
	</div>

	<div class="tab-contents">
		<div class="tab-content is-active">Content Tab 1</div>
		<div class="tab-content">Content Tab 2</div>
		<div class="tab-content">Content Tab 3</div>
		<div class="tab-content">Content Tab 4</div>
		<div class="tab-content">Content Tab 5</div>
	</div>
</div>
Interactive tabs

Use JavaScript to get an interactive state.

Tab content 1
Tab content 2
Tab content 3
Tab content 4
Tab content 5

Previous: Components

← Table

Next: Components

Toast →