Conseils
Le composant de menu de navigation principal est un élément fondamental de toute application et de tout site Web. Il permet aux visiteurs d’explorer l’architecture de l’information, de comprendre ce à quoi ils ont accès et d’accéder rapidement aux sujets, aux pages et aux fonctionnalités. Ce composant propose plusieurs options pour s’adapter à une variété de plateformes et d’expériences, incluant un bouton de base pour basculer entre les langues, un bouton de panier, un mégamenu, une barre de recherche et un bouton de prise en charge des comptes utilisateurs. Quelle que soit la configuration, il doit demeurer cohérent, réactif et facile à comprendre sur différents écrans et dans différents contextes.
À faire
- Privilégiez la simplicité et utilisez des étiquettes claires et descriptives.
- Maintenez la cohérence à travers les différentes pages ou sections.
- Priorisez les éléments essentiels et concentrez-vous sur les niveaux supérieurs de l’architecture de l’information.
À ne pas faire
- Ne surchargez pas les utilisateurs avec un trop grand nombre d’options.
- Ne modifiez pas l’emplacement ou le fonctionnement du menu de navigation principal.
- N’ajoutez pas d’autres boutons ou liens que ceux présentés à la barre de navigation principale. N’ajoutez pas de liens au mégamenu.
Pour intégrer ce composant, insérez gnb-menus-1.0.0.js au bas de la page, avant la balise de fermeture du corps du document.
Bouton pour basculer entre les langues
Le menu de navigation de base se compose du logo et du bouton permettant de basculer entre les langues. Il convient aux applications, aux sites Web promotionnels, aux sites Web de projets et d’initiatives, aux formulaires et aux processus de demande. Cette barre de navigation simplifiée évite à l’utilisateur de quitter la page lorsqu’il accomplit une tâche ou un processus.
HTML
<header class="gnb-header">
<div class="logo">
<a href="https://www.gnb.ca">
<img src="img/NB.svg" alt="Gouvernement du Nouveau-Brunswick" id="logo" />
</a>
</div>
<div class="gnb-main-nav">
<nav>
<ul>
<li><a href="#">English</a></li>
</ul>
</nav>
</div>
</header>
Panier
Ce menu de navigation se compose du logo, du bouton permettant de basculer entre les langues et du bouton du panier. Il est idéal lorsque les services, les formulaires ou les processus de demande exigent un paiement. Cette barre de navigation simplifiée évite à l’utilisateur de quitter la page lorsqu’il accomplit une tâche ou un processus.
HTML
<header class="gnb-header">
<div class="logo">
<a href="https://www.gnb.ca">
<img src="img/NB.svg" alt="Gouvernement du Nouveau-Brunswick" id="logo" />
</a>
</div>
<div class="gnb-main-nav">
<nav>
<ul>
<li><a href="#">English</a></li>
<li><button class="btn-cart"><span>Panier</span></button></li>
</ul>
</nav>
</div>
</header>
Mégamenu
Ce menu de navigation se compose du logo, du bouton permettant de basculer entre les langues et du
bouton du mégamenu. Le mégamenu permet d’afficher le contenu et les options de navigation dans un
grand format déroulant à multiples colonnes. Pour organiser le contenu, utilisez le système de
grille dans la section
.gnb-mega-menu.
HTML
<header class="gnb-header">
<div class="logo">
<a href="https://www.gnb.ca">
<img src="img/NB.svg" alt="Gouvernement du Nouveau-Brunswick" id="logo" />
</a>
</div>
<div class="gnb-main-nav">
<nav>
<ul>
<li><a href="#">English</a></li>
<li>
<button aria-expanded="false" id="btn-mega-menu"><span>Menu</span></button>
</li>
</ul>
</nav>
</div>
</header>
<section class="gnb-mega-menu" id="gnb-mega-menu">
<div class="container padding-bottom-xl">
<h2>Information et services</h2>
<ul class="gnb-list-nav row row-cols-1 row-cols-md-2 row-cols-lg-3">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</div>
</section>
<!-- Ajoutez ceci au bas de votre page avant la balise de fermeture du corps -->
<script src="gnb-menus-1.0.0.js"></script>
Barre de recherche
Ajoutez une barre de recherche globale à votre site Web ou à votre application.
Recherche
HTML
<header class="gnb-header">
<div class="logo">
<a href="https://www.gnb.ca">
<img src="img/NB.svg" alt="Gouvernement du Nouveau-Brunswick" id="logo" />
</a>
</div>
<div class="gnb-main-nav">
<nav>
<ul>
<li><a href="#">English</a></li>
<li>
<button aria-expanded="false" id="btn-search" class="btn-search"><span>Recherche</span></button>
</li>
<li>
<button aria-expanded="false" id="btn-mega-menu"><span>Menu</span></button>
</li>
</ul>
</nav>
</div>
</header>
<section class="gnb-search" id="gnb-search">
<div class="container padding-bottom-xl">
<h2>Recherche</h2>
<!-- Recherche avec bouton -->
<form class="gnb-input-pair">
<label class="visually-hidden" for="search">Recherche</label>
<input id="search" type="search" />
<button class="gnb-btn-search"><span>Recherche</span></button>
</form>
</div>
</section>
<section class="gnb-mega-menu" id="gnb-mega-menu">
<div class="container padding-bottom-xl">
<h2>Information et services</h2>
<ul class="gnb-list-nav row row-cols-1 row-cols-md-2 row-cols-lg-3">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</div>
</section>
Compte utilisateur
Ajoutez un bouton de prise en charge des comptes d’utilisateurs à votre menu de navigation principal. Le bouton se décline deux états :
- Connexion : Ce libellé s’affiche avant que l’utilisateur ne se connecte à son compte et permet d’afficher le formulaire de connexion.
- Compte : Ce libellé s’affiche une fois que l’utilisateur s’est connecté à son compte, et propose une série d’éléments de menu liés à son compte.
Avant la connexion
Le libellé du menu indique « Connexion » et permet d’ouvrir le formulaire de connexion.
Search
Connectez-vous à votre compte
Si vous n'en avez pas encore, vous pouvez créer un compte.
Après la connexion
Le libellé du menu indique « Compte » et permet d’ouvrir le menu du compte.
Recherche
HTML
<header class="gnb-header">
<div class="logo">
<a href="https://www.gnb.ca">
<img src="img/NB.svg" alt="Gouvernement du Nouveau-Brunswick" id="logo" />
</a>
</div>
<div class="gnb-main-nav">
<nav>
<ul>
<li><a>English</a></li>
<li>
<button aria-expanded="false" id="btn-search" class="btn-search"><span>Recherche</span></button>
</li>
<!-- Avant qu'un utilisateur se connecte, il devrait voir le bouton de connexion -->
<li>
<button aria-expanded="false" id="btn-sign-in" class="btn-sign-in"><span>Se connecter</span></button>
</li>
<!-- Après qu'un utilisateur se soit connecté, il devrait voir le bouton du compte -->
<li>
<button aria-expanded="false" id="btn-account" class="btn-account"><span>Compte</span></button>
</li>
<li>
<button aria-expanded="false" id="btn-mega-menu"><span>Menu</span></button>
</li>
</ul>
</nav>
</div>
</header>
<section class="gnb-mega-menu" id="gnb-search">
<div class="container padding-bottom-xl">
<h2>Recherche</h2>
<!-- Recherche avec bouton -->
<form class="gnb-input-pair">
<label class="visually-hidden" for="search">Recherche</label>
<input id="search" type="search" />
<button class="gnb-btn-search"><span>Recherche</span></button>
</form>
</div>
</section>
<!-- Avant qu'un utilisateur se soit connecté, il devrait voir le formulaire de connexion -->
<section class="gnb-sign-in" id="gnb-sign-in">
<div class="container padding-bottom-xl">
<div class="row">
<h2 class="margin-bottom-md">Connectez-vous à votre compte</h2>
<p>
Si vous n'en avez pas encore, vous pouvez <a href="#">créer un compte</a>.
</p>
<div class="col col-lg-6">
<form>
<label for="email">Adresse électronique</label>
<input type="email" id="email" name="email" placeholder="email@exemple.com">
<label for="password">Mot de passe</label>
<input type="password" id="password" name="password">
<fieldset class="gnb-checkboxes">
<legend class="visually-hidden">Rester connecté</legend>
<div class="pair">
<input type="checkbox" name="default" id="default">
<label for="default">Se souvenir de moi</label>
</div>
</fieldset>
<button type="submit" class="btn-primary">Se connecter</button>
</form>
<hr />
<ul>
<li><a href="#">Mot de passe oublié ?</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Après qu'un utilisateur se soit connecté, il devrait voir ce menu -->
<section class="gnb-account" id="gnb-account">
<div class="container">
<h2>Votre compte</h2>
<ul class="gnb-list-nav">
<li><a href="#">Modifier votre profil</a></li>
<li><a href="#">Changer votre mot de passe</a></li>
<li><a href="#">Questions de sécurité</a></li>
<li><a href="#">Se déconnecter</a></li>
</ul>
</div>
</section>
<section class="gnb-mega-menu" id="gnb-mega-menu">
<div class="container padding-bottom-xl">
<h2>Informations et services</h2>
<ul class="gnb-list-nav row row-cols-1 row-cols-md-2 row-cols-lg-4">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</section>