Navigation Modules, Content navigation, Swiss Confederation Web Guidelines

Pagination

FLEX

2.1.8

added <span class="sr-only">current page</span> and aria-disabled="true" for accessibility
added titleto empty link (link only with icon)
added .clearfixand .pull-left inside of `.pagination-container

The paging function allows the user to browse through a large number of elements which are arranged into pages. The element appears above and below the elements list.

<nav class="pagination-container clearfix">
	<span class="pull-left">Object - 2 of 3</span>
	<ul class="pull-right pagination">
		<li class="separator disabled">
			<a href="#" title="Step backward" aria-disabled="true">
        <span class="icon icon--step-backward"></span>
        <span class="sr-only">Step backward</span>
      </a>
		</li>
		<li class="separator disabled"><a aria-disabled="true" href="#">Previous</a></li>
		<li class="active"><a href="#">1 <span class="sr-only">current page</span></a></li>
		<li><a href="#">2</a></li>
		<li>...</li>
		<li><a href="#">17</a></li>
		<li class="separator-left"><a href="#">Next</a></li>
		<li class="separator-left">
			<a href="#" title="Step forward">
        <span class="icon icon--step-forward"></span>
        <span class="sr-only">Step forward</span>
      </a>
		</li>
	</ul>
</nav>

Anchor links

FLEX

An anchor link is a jump label which allows the user to navigate to a particular position within the page currently in use.

<ul>
	<li class="anchor"><a class=" icon icon--before icon--root" href="#">Link 1</a></li>
	<li class="anchor"><a class=" icon icon--before icon--root" href="#">Link 2</a></li>
	<li class="anchor"><a class=" icon icon--before icon--root" href="#">Link 3</a></li>
</ul>

Process navigation is used in connection with forms that are spread over several pages. The active process stage is marked in red. The previous steps are clickable and lead the user back to the selected process stage.

<nav class="nav-process">
	<ul>
		<li>
			<a href="#">Step 1</a>
		</li>
		<li>
			<a href="#">Step 2</a>
		</li>
		<li class="active">
			<a href="#">Step 3</a>
		</li>
		<li class="disabled">
			<a href="#">Step 4</a>
		</li>
	</ul>
</nav>

Tab navigation

FLEX

Tab navigation is used to group related contents locally within the same page. By way of exception, the font color of the tabs is dark gray (rather than blue) here. The active tab is highlighted with the red bar and the white background color.

Please note that the contents in the tabs are only used for presentation purposes here. The actual contents are contingent on the purpose of their use (e.g. search results or “further information”).

Reference in detailed specification: Chapter 2.5.4

1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, voluptas, repudiandae, sequi, aliquam eveniet laborum sunt accusantium quisquam esse obcaecati similique iure voluptates nobis provident totam autem odit quos eligendi!

2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, et nam molestiae repellat voluptas. Praesentium, earum reprehenderit quam voluptatem qui minus neque? Libero, minima magni ab dolor nemo reiciendis aperiam.

3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, qui, eligendi veritatis tenetur magnam aut voluptates nam optio eveniet ad quisquam est blanditiis cumque error illum sapiente consectetur tempora impedit?

4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, libero, alias veniam a eveniet dolores necessitatibus nam officiis blanditiis ea expedita vitae minima et inventore dolorum quibusdam natus commodi rerum.

<div class="row">
	<div class="col-sm-10 col-sm-offset-1">
		<!-- Nav tabs -->
		<ul class="nav nav-tabs">
			<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
			<li><a href="#profile" data-toggle="tab">Profile</a></li>
			<li><a href="#messages" data-toggle="tab">Messages</a></li>
			<li><a href="#settings" data-toggle="tab">Settings</a></li>
		</ul>

		<!-- Tab panes -->
		<div class="tab-content tab-border">
			<div class="tab-pane active" id="home">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, voluptas, repudiandae, sequi, aliquam eveniet laborum sunt accusantium quisquam esse obcaecati similique iure voluptates nobis provident totam autem odit quos eligendi!</div>
			<div class="tab-pane" id="profile">2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, et nam molestiae repellat voluptas. Praesentium, earum reprehenderit quam voluptatem qui minus neque? Libero, minima magni ab dolor nemo reiciendis aperiam.</div>
			<div class="tab-pane" id="messages">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, qui, eligendi veritatis tenetur magnam aut voluptates nam optio eveniet ad quisquam est blanditiis cumque error illum sapiente consectetur tempora impedit?</div>
			<div class="tab-pane" id="settings">4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, libero, alias veniam a eveniet dolores necessitatibus nam officiis blanditiis ea expedita vitae minima et inventore dolorum quibusdam natus commodi rerum.</div>
		</div>
	</div>
</div>

Navigation

Search

Content navigation