Tabs

Add a set of responsive horizontal tabs.

<div class="tabs">
	<ul role="tablist">
		<li class="is-active"><a role="tab" aria-controls="day" aria-selected="true" data-target="#day">Day</a></li>
		<li><a role="tab" aria-controls="week" data-target="#week">Week</a></li>
		<li><a role="tab" aria-controls="month" data-target="#month">Month</a></li>
		<li><a role="tab" aria-controls="year" data-target="#year">Year</a></li>
	</ul>
</div>

Kriyā does not include JavaScript, so you'll have to implement tabs yourself.

Icons

Add some bling to your tabs with icons.

<div class="tabs">
	<ul role="tablist">
		<li class="is-active">
			<a role="tab" aria-controls="artists" aria-selected="true" data-target="#artists">
				<span class="icon is-16">
					<svg version="1.1" viewBox="0 0 16 16" role="img"><title>Mic icon</title><g transform="translate(0, 0)"><path fill="#444444" d="M14,7h-1V5c0-2.757-2.243-5-5-5S3,2.243,3,5v2H2C1.447,7,1,7.448,1,8s0.447,1,1,1h1 c0,2.414,1.721,4.434,4,4.899V16h2v-2.101c2.279-0.465,4-2.484,4-4.899h1c0.553,0,1-0.448,1-1S14.553,7,14,7z M5,5 c0-1.654,1.346-3,3-3s3,1.346,3,3v2H5V5z"></path></g></svg>
				</span>
				<span>Artists</span>
			</a>
		</li>
		etc...

Toggle Tabs

If you want your tabs to feel more like like radio buttons (where clicking one deselects the others) use the is-toggle modifier.

<div class="tabs is-toggle">
	<ul role="tablist">
		<li class="is-active">
			<a role="tab" aria-controls="artists" aria-selected="true" data-target="#artists">
				<span class="icon is-16">
					<svg version="1.1" viewBox="0 0 16 16" role="img"><title>Mic icon</title><g transform="translate(0, 0)"><path fill="#444444" d="M14,7h-1V5c0-2.757-2.243-5-5-5S3,2.243,3,5v2H2C1.447,7,1,7.448,1,8s0.447,1,1,1h1 c0,2.414,1.721,4.434,4,4.899V16h2v-2.101c2.279-0.465,4-2.484,4-4.899h1c0.553,0,1-0.448,1-1S14.553,7,14,7z M5,5 c0-1.654,1.346-3,3-3s3,1.346,3,3v2H5V5z"></path></g></svg>
				</span>
				<span>Artists</span>
			</a>
		</li>
		etc...