ExpressionEngine®
Style Guide

Interaction Guidelines

Tabs are used to organize content, and help convert an otherwise overwhelming section into something more manageable and friendly for the user.

Tabs should not be used to hide, or devalue content or forms.

A tab should be highlighted or otherwise marked, when the content of the tab has an error or other anomaly that the user must act on.

System generated tabs must be empty of content to be removed from the interface. User created tabs may be removed without being empty.

The default tab, must be the left most tab.

Box Tabs

A content box may have tabs. Tabs consist of two items. The tab bar, and the tab contents.

To create a tabbed interface, wrap a ul and the tab content blocks in a div.tab-wrap.

Each link within the tab bar must have a rel of t-[n].

The default tab must use a rel of t-0, and a class of .act. Additional tabs should be numbered from 1 to n.

Tab content must be wrapped in a div.tab.t-[n], the default content also requires a class of .tab-open.

You must also add .has-tabs to the div.box.

HTML

<div class="col-group">
	<div class="col w-4">
		<div class="box sidebar">
		</div>
	</div>
	<div class="col w-12">
		<div class="box has-tabs">
			<h1>Box header</h1>
			<div class="tab-wrap">
				<ul class="tabs">
					<li><a class="act" href="" rel="t-0">Default Tab</a></li>
					<li><a href="" rel="t-1">Tab</a></li>
				</ul>
				<div class="tab t-0 tab-open"> default tab </div>
				<div class="tab t-1"> tab </div>
			</div>
			...
		</div>
	</div>
</div>

Visual Output

Box header

default tab

tab

back to the top


Tab Bar Highlights Requires: Box Tabs

A tab can have highlights applied to it.

  • .highlight
  • .invalid

Usage

A highlighted tab indicates that the content of that tab has been changed.

A invalid tab indicates that the content of that tab has an error, and cannot be submitted as is.

HTML

<div class="col-group">
	<div class="col w-4">
		<div class="box sidebar">
		</div>
	</div>
	<div class="col w-12">
		<div class="box has-tabs">
			<h1>Box header</h1>
			<div class="tab-wrap">
				<ul class="tabs">
					<li><a class="act" href="" rel="t-0">Default Tab</a></li>
					<li><a class="highlight" href="" rel="t-1">Highlight Tab</a></li>
					<li><a class="invalid" href="" rel="t-2">Invalid Tab</a></li>
				</ul>
				<div class="tab t-0 tab-open"> default tab </div>
				<div class="tab t-1"> tab </div>
				<div class="tab t-2"> tab </div>
			</div>
		</div>
	</div>
</div>

Visual Output

Box header

default tab

This tab has been highlighted to indicate that it has changed content. Usually used in the publish form.

This tab has been marked invalid to indicate there is an issue with it's content. Usually used in the publish form.

back to the top


Tab Bar Layout

You must add .layout to the .tabs for Channel Publish Form Layouts.

This allows you to add interaction buttons to your tabs.

HTML

<div class="col-group">
	<div class="col w-4">
		<div class="box sidebar">
		</div>
	</div>
	<div class="col w-12">
		<div class="box has-tabs">
			<h1>Box header</h1>
			<div class="tab-wrap">
				<ul class="tabs layout">
					<li><a class="act" href="" rel="t-0">Default Tab</a></li>
					<li><a href="" rel="t-1">Tab</a></li>
				</ul>
				<div class="tab t-0 tab-open"> default tab </div>
				<div class="tab t-1"> tab </div>
				...
			</div>
		</div>
	</div>
</div>

Visual Output

Box header

default tab

tab

back to the top


Tab Bar Layout Types Requires: Tab Bar Layout

You can also give a .tabs.layout tabs an icon interaction button.

Use a span.class following the a tag within a .tabs.layout li.

  • .tab-on indicates tab will be visible in publish forms
  • .tab-off indicates tab will be hidden in publish forms
  • .tab-remove indicates tab may be removed from publish forms

HTML

<div class="col-group">
	<div class="col w-4">
		<div class="box sidebar">
		</div>
	</div>
	<div class="col w-12">
		<div class="box has-tabs">
			<h1>Box header</h1>
			<div class="tab-wrap">
				<ul class="tabs layout">
					<li><a class="act" href="" rel="t-0">Default Tab</a></li>
					<li><a href="" rel="t-1">Tab On</a> <span class="tab-on"></span></li>
					<li><a href="" rel="t-2">Tab Off</a> <span class="tab-off"></span></li>
					<li><a href="" rel="t-3">Removable Tab</a> <span class="tab-remove"></span></li>
				</ul>
				<div class="tab t-0 tab-open"> default tab </div>
				<div class="tab t-1"> tab </div>
				<div class="tab t-2"> tab </div>
				<div class="tab t-3"> tab </div>
			</div>
		</div>
	</div>
</div>

Visual Output

Box header

default tab

This tab has a tab-on icon, to indicate it'll be visible to users.

This tab has a tab-off icon, to indicate it'll be invisible to users.

This tab has a tab-remove icon, to indicate that you can delete it.