Navigations

Conseils

Les éléments de navigation offrent des options supplémentaires par rapport au menu de navigation principale et permettent aux utilisateurs de naviguer et de trouver ce dont ils ont besoin avec rapidité et facilité. Il existe quatre types d’éléments de navigation :

• Navigation dans la page : À utiliser pour faciliter la navigation à l’intérieur de la page.
• Navigation latérale : À utiliser pour permettre aux utilisateurs de naviguer entre des pages connexes.
• Navigation dans les étapes : À utiliser dans les formulaires en plusieurs étapes ou dans les processus de paiement pour guider les utilisateurs à travers chaque étape et indiquer leur progression.
• Navigation « Retour en haut » : À utiliser sur les longues pages pour permettre aux utilisateurs de revenir en haut sans faire défiler la page manuellement.

Navigation dans la page

Cet élément de navigation est utilisé dans les longues pages de contenu de destination. Il ne doit être lié qu’aux ancres de niveau <h2> au sein de la même page..

<nav class="gnb-page-nav">
<h2>Sur cette page</h2>
<ul>
	<li><a href="#">Lorem ipsum dolor</a></li>
	<li><a href="#">Lorem ipsum dolor sit amet</a></li>
	<li><a href="#">Lorem ipsum sit amet</a></li>
	<li><a href="#">Lorem ipsum</a></li>
</ul>
</nav>

Navigation latérale

L’élément de navigation latérale affiche la position actuelle de l’utilisateur dans la hiérarchie du contenu lorsqu’il se situe à des niveaux inférieurs au menu de navigation principal et lui permet de se déplacer entre les pages de contenu connexes.

Un niveau

<nav class="gnb-side-nav">
	<h2>Titre de la nav</h2>
	<ul>
		<li><a href="#">Élément de liste</a></li>
		<li><a href="#">Élément de liste</a></li>
		<li class="active"><a href="#">Élément de liste actif</a></li>
		<li><a href="#">Élément de liste</a></li>
	</ul>
</nav>

Deux niveaux

<nav class="gnb-side-nav">
	<h2>Titre de la nav</h2>
	<ul>
		<li><a href="#">Élément de liste</a></li>
		<li><a href="#">Élément de liste</a></li>
		<li class="current"><a href="#">Élément parent</a>
			<ul>
				<li><a href="#">Élément de liste</a></li>
				<li><a href="#">Élément de liste</a></li>
				<li class="active"><a href="#">Élément de liste actif</a></li>
				<li><a href="#">Élément de liste</a></li>
			</ul>
		</li>
		<li><a href="#">Élément de liste</a></li>
	</ul>
</nav>

Navigation dans les étapes

L’élément de navigation dans les étapes vous permet d’afficher le cheminement de l’utilisateur au fil d’un processus.

Étapes numérotées

<nav class="gnb-progress-steps-nav">
    <h2>Titre de la nav</h2>
    <ul class="gnb-progress-steps-circle">
        <li class="complete">
            <div><a href="#">1. Titre de l'étape un</a></div>
        </li>
        <li class="complete">
            <div><a href="#">2. Titre de l'étape deux</a></div>
        </li>
        <li class="current">
            <div>3. Titre de l'étape trois</div>
        </li>
        <li>
            <div>4. Titre de l'étape quatre</div>
        </li>
    </ul>
</nav>

Titre et description

<nav class="gnb-progress-steps-nav">
    <h2>Titre de la nav</h2>
    <ul class="gnb-progress-steps-circle">
        <li class="complete">
            <div>
                <h3><a href="#">Titre de l'étape un</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            </div>
        </li>
        <li class="current">
            <div>
                <h3>Titre de l'étape deux</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            </div>
        </li>
        <li>
            <div>
                <h3>Titre de l'étape trois</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            </div>
        </li>
    </ul>
</nav>

Navigation « Retour en haut » fixe

Cet élément de navigation est utilisé dans les longues pages de contenu de destination. Il vous permet d’afficher un lien de retour vers le haut de la page qui demeure visible à l’écran lorsque les utilisateurs font défiler le contenu. Il vous évite ainsi d’avoir à insérer de nombreux liens de retour vers le haut à travers le contenu de la page.

Le bouton « Retour en haut » est fixé dans le coin inférieur droit de l’écran et apparaît lors du défilement.

Le bouton gnb-sticky-top est caché. est masqué par défaut. Si vous travaillez sur un projet qui ne supporte pas le JavaScript, vous pouvez remplacer l’identifiant (id) du bouton par gnb-sticky-top-static pour le rendre visible.

Cet élément ne peut être utilisé qu’une fois par page.

<!-- Ajoutez ceci en bas de votre contenu juste avant </main> -->
<button id="gnb-sticky-top">
    <span>Retour en haut</span>
</button>

<!-- Ajoutez ceci en bas de votre page avant la balise de fermeture du corps -->
<script src="gnb-sticky-top-1.0.0.js"></script>