Tabs

Preview

If you are using individual js components, tabs.js is required.

Simple Tabs The standard state for any tabs where they are already in a padded container.

Content. Metrics.

Radio Button Tabs These are simple tabs with radio inputs.

Content. Default.

Flushed Tabs For using inside modals or boxes where they are in a padded container but need to be flush to the top and sides.

Item #1

Content. Forms.

Item #2

Content. Forms.

Overflow Tabs When there is not enough space to have all the tabs we show an arrow and allow horizontal scrolling and a navigation.

Content. General Tab.

Overflow & Flushed Tabs When there is not enough space to have all the tabs we show an flushed arrow and allow horizontal scrolling and a navigation.

Content. Tab 1.

Documentation

Sample Markup

Tabs markup changed to follow WAI-ARIA best practices. We still support old legacy code but we strongly recommend to update your project as soon as possible to prevent any problems in the future.

<div class="sui-tabs">

	<div role="tablist" class="sui-tabs-menu">

		<!--
		NOTE(S):

		1. Include "type" attribute when using tabs inside a form to prevent
		problems when submitting the form.

		2. Include "aria-controls" attribute when using tabs with content.

		3. Unique IDs are a must for button tab and its content.
		-->

		<button
			type="button"
			role="tab"
			id="one__tab"
			class="sui-tab-item active"
			aria-controls="one__content"
			aria-selected="true">
			Tab 1
		</button>

		<button
			type="button"
			role="tab"
			id="two__tab"
			class="sui-tab-item"
			aria-controls="two__content"
			aria-selected="false"
			tabindex="-1">
			Tab 2
		</button>

	</div>

	<div class="sui-tabs-content">

		<div
			role="tabpanel"
			tabindex="0"
			id="one__content"
			class="sui-tab-content active"
			aria-labelledby="one__tab">
			<p>Content. Tab 1.</p>
		</div>

		<div
			role="tabpanel"
			tabindex="0"
			id="two__content"
			class="sui-tab-content"
			aria-labelledby="two__tab"
			hidden>
			<p>Content. Tab 2.</p>
		</div>

	</div>

</div>

<div class="sui-tabs">

	<div role="tablist" class="sui-tabs-menu">

		<!--
		NOTE(S):

		1. Include "type" attribute when using tabs inside a form to prevent
		problems when submitting the form.

		2. Include "aria-controls" attribute when using tabs with content.

		3. Unique IDs are a must for button tab and its content.
		-->

		<button
			type="button"
			role="tab"
			id="one__tab"
			class="sui-tab-item active"
			aria-controls="one__content"
			aria-selected="true">
			Tab 1
		</button>
		<input
			type="radio"
			name="sample-tabs"
			value="one"
			class="sui-screen-reader-text"
			aria-label="Tab 1"
			aria-hidden="true"
			checked="checked" />

		<button
			type="button"
			role="tab"
			id="two__tab"
			class="sui-tab-item"
			aria-controls="two__content"
			aria-selected="false"
			tabindex="-1">
			Tab 2
		</button>
		<input
			type="radio"
			name="sample-tabs"
			value="two"
			class="sui-screen-reader-text"
			aria-label="Tab 2"
			aria-hidden="true" />

	</div>

	<div class="sui-tabs-content">

		<div
			role="tabpanel"
			tabindex="0"
			id="one__content"
			class="sui-tab-content active"
			aria-labelledby="one__tab">
			<p>Content. Tab 1.</p>
		</div>

		<div
			role="tabpanel"
			tabindex="0"
			id="two__content"
			class="sui-tab-content"
			aria-labelledby="two__tab"
			hidden>
			<p>Content. Tab 2.</p>
		</div>

	</div>

</div>

Extra Options

For using inside modals or boxes where they are in a padded container but need to be flush to the top and sides, just add sui-tabs-flushed class to the main container.

<div class="sui-tabs sui-tabs-flushed">

	...

</div>

When there is not enough space to have all the tabs we need to show arrow buttons and allow horizontal scrolling for user proper navigation.

You will need to include the navigation html directly before the [data-tabs].

<div class="sui-tabs sui-tabs-overflow">

	<div
		tabindex="-1"
		class="sui-tabs-navigation"
		aria-hidden="true"
	>
		<button
			type="button"
			class="sui-button-icon sui-tabs-navigation--left"
		>
			<span class="sui-icon-chevron-left"></span>
		</button>
		<button
			type="button"
			class="sui-button-icon sui-tabs-navigation--right"
		>
			<span class="sui-icon-chevron-right"></span>
		</button>
	</div>

	<div role="tablist" class="sui-tabs-menu">
		...
	</div>

	<div class="sui-tabs-content">
		...
	</div>

</div>

When there is not enough space to have all the tabs we show an flushed arrow and allow horizontal scrolling and a navigation.

You will need to include the navigation html directly before the [data-tabs].

<div class="sui-tabs sui-tabs-overflow sui-tabs-flushed">

	<div
		tabindex="-1"
		class="sui-tabs-navigation"
		aria-hidden="true"
	>
		<button
			type="button"
			class="sui-button-icon sui-tabs-navigation--left"
		>
			<span class="sui-icon-chevron-left"></span>
		</button>
		<button
			type="button"
			class="sui-button-icon sui-tabs-navigation--right"
		>
			<span class="sui-icon-chevron-right"></span>
		</button>
	</div>

	<div role="tablist" class="sui-tabs-menu">
		...
	</div>

	<div class="sui-tabs-content">
		...
	</div>

</div>

Advanced Usage

SUI.tabs({
	callback: function( tab, panel ) {
		console.log( tab );
		console.log( panel );
	}
});

callback

It's an anonymous function that will run when you click a tab. You will have access to the clicked tab and the respective panel (tab content).

To get all tabs within the group you can do this inside the anonymous function:

var wrapper = tab.closest( '.sui-tabs' ),
	tablist = tab.closest( '[role="tablist"]' ),
	tabs    = tablist.find( '> .sui-tab-item' ),
	panels  = wrapper.find( '> .sui-tabs-content > [role="tabpanel"]' )
	;

	console.log( tabs );
	console.log( panels );