Modules de navigation, Navigation de contenu, Lignes directrices pour le design web de la Confédération

Pagination

FLEX

2.1.8

<span class="sr-only">page actuelle</span> et aria-disabled="true" ajoutés pour l’accessibilité
title ajouté au lien vide (lien ayant seulement une icône)
.clearfix et .pull-left ajouté à l’intérieur de `.pagination-container

A l’aide de la fonction «Pagination», l’utilisateur peut parcourir un grand nombre d’éléments qui sont classés par pages. L’élément apparaît en haut et en bas de la liste d’éléments.

<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>

Liens d’ancre

FLEX

Un lien d’ancre est un label (marqueur de saut) permettant de se diriger directement vers une position à l’intérieur de la page actuelle.

<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>

La navigation de processus est utilisée en relation avec des formulaires répartis sur plusieurs pages. L’étape de processus active est marquée en rouge. Les étapes précédentes sont cliquables et ramènent à l’étape de processus respective.

Attention

le présent exemple décrit seulement le design graphique; la navigation de processus doit être programmée dans tous les cas conformément au processus sous-jacent.

<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>

Navigation par onglets

FLEX

La navigation par onglets est utilisée lorsque des contenus connexes doivent être regroupés sur une page. A titre d’exception, la couleur de la police est gris foncé (au lieu de bleu). L’onglet actif est mis en évidence par la ligne rouge et le fond blanc.

Les désignations des onglets sont seulement des exemples. Elles dépendent du contenu réel de la page.

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 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

Chercher

Navigation de contenu