Skip to content

WordPress Component Library
10up Engineering

Tabs

The tabs component is based on and extended from work done by the folks over at Simply Accessible. It is a stripped down, but still accessible version of UI tabs. They are keyboard accessible and user friendly and are meant to be a starting point for you to use on a project.

HTML

<div class="tabs">
	<div class="tab-control">
		<ul class="tab-list" role="tablist">
			<li class="tab-item">
				<a href="#js-tab1" role="tab" aria-controls="js-tab1">View Tab 1</a>
				<!-- This can be a link or button: <button role="tab" aria-controls="js-tab1">View Tab 1</button> -->
			</li>
			<li class="tab-item">
				<a href="#js-tab2" role="tab" aria-controls="js-tab2">View Tab 2</a>
			</li>
			<li class="tab-item">
				<a href="#js-tab3" role="tab" aria-controls="js-tab3">View Tab 3</a>
			</li>
			<li class="tab-item">
				<a href="#js-tab4" role="tab" aria-controls="js-tab4">View Tab 4</a>
			</li>
			<li class="tab-item">
				<a href="#js-tab5" role="tab" aria-controls="js-tab5">View Tab 5</a>
			</li>
		</ul>
	</div><!-- //.tab-control -->

	<div class="tab-group">

		<div class="tab-content" id="js-tab1" role="tabpanel">
			<h2>Tab 1 Content</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div><!-- //.tab-content -->

		<div class="tab-content" id="js-tab2" role="tabpanel">
			<h2>Tab 2 Content</h2>
			<p>In tincidunt tempor risus gravida tincidunt.</p>
		</div><!-- //.tab-content -->

		<div class="tab-content" id="js-tab3" role="tabpanel">
			<h2>Tab 3 Content</h2>
			<p>Suspendisse eget commodo erat. Donec a metus fringilla, pharetra ipsum nec, aliquet felis. </p>
		</div><!-- //.tab-content -->

		<div class="tab-content" id="js-tab4" role="tabpanel">
			<h2>Tab 4 Content</h2>
			<p>Aenean eu nibh nisl. Nulla ornare condimentum erat, et rhoncus urna euismod a.</p>
		</div><!-- //.tab-content -->

		<div class="tab-content" id="js-tab5" role="tabpanel">
			<h2>Tab 5 Content</h2>
			<p>Duis sollicitudin consequat lorem eu sagittis.</p>
		</div><!-- //.tab-content -->

	</div><!-- //.tab-group -->

</div><!-- //.tabs -->

PostCSS Download PostCSS

@import url("./dist/tabs.css");

JavaScript Plugin

Create a new instance by supplying the selector to use for the tabs and an object containing any necessary callback functions.

NPM

npm install --save @10up/component-tabs

import tabs from '@10up/component-tabs';

tabs( '.tabs', {
	orientation: 'horizontal', // default is 'horizontal', can be 'vertical'
	onCreate: function() {
		console.log( 'onCreate callback' );
	},
	onTabChange: function() {
		console.log( 'onTabChange callback' );
	}
} );

Standalone

Include the tabs.js file from the dist/ directory and access the component from the gobal TenUp object.

let myTabs = new TenUp.tabs( '.tabs', {
	orientation: 'horizontal', // default is 'horizontal', can be 'vertical'
	onCreate: function() {
		console.log( 'onCreate callback' );
	},
	onTabChange: function() {
		console.log( 'onTabChange callback' );
	}
} );

API

This component accepts two arguments, the selector for the tab container and an object containing optional callbacks.

Option
Callbacks

Browser Compatibility

Feature Chrome Firefox Internet Explorer Edge Safari
Basic Support Latest Latest 11 [* Standalone only] Latest Latest

* IE11 does not currently support ES6 @import.

Resources