En-tête

Statut: Stable
Type: Fonctionnalité du site Canada.ca
Dernière révision: 2022-08-31

Objectif

Affiche la portion de l'en-tête qui se trouve sous la bannière.

Peut contenir les composants suivants :

Menu GCWeb
Authentification

Example pratique

Comment mettre en œuvre

Cette version requière l'implémentation de la version 3.0 du menu GCWeb ou le code <div class="container"> a été relocalisé dans l'en-tête donc l'extérieur du composant "gcweb-menu".

Voici un exemple de code démontrant tous les composants communs inclus, d'où quelques-uns nécessitent une configuration par votre système de gestion de contenu web tel que le composant du fil d'Ariane.

<nav>
	<ul id="wb-tphp">
		<li class="wb-slc"><a class="wb-sl" href="#wb-cont">Passer au contenu principal</a></li>
		<li class="wb-slc visible-sm visible-md visible-lg"><a class="wb-sl" href="#wb-info">Passer à « À propos de ce site »</a></li></ul>
</nav>

<header>
<div id="wb-bnr" class="container"><div class="row">

<section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
	<h2 class="wb-inv">Sélection de la langue</h2>
	<ul class="list-inline mrgn-bttm-0">
		<li>
			<a lang="en" hreflang="en" href="header-docs-en.html">
				<span class="hidden-xs" translate="no">English</span>
				<abbr title="English" translate="no" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase">en</abbr>
			</a>
		</li>
	</ul>
</section>

<div class="brand col-xs-9 col-sm-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
	<a href="https://wet-boew.github.io/GCWeb/" property="url">
		<img src="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/assets/sig-blk-fr.svg" alt="Gouvernement du Canada" property="logo" /><span class="wb-inv"> / <span lang="en">Government of Canada</span></span>
	</a>
	<meta property="name" content="Gouvernement du Canada">
	<meta property="areaServed" typeof="Country" content="Canada" />
	<link property="logo" href="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/assets/wmms-blk.svg" />
</div>

<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
	<h2>Recherche</h2>
	<form action="/fr/sr/srb.html" name="cse-search-box" role="search">
		<div class="form-group wb-srch-qry">
			<label for="wb-srch-q" class="wb-inv">Rechercher dans Canada.ca</label>
			<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Rechercher dans Canada.ca" />
			<datalist id="wb-srch-q-ac"></datalist>
		</div>
		<div class="form-group submit">
			<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Recherche</span></button>
		</div>
	</form>
</section>

</div></div>
<hr>
<div class="container"><div class="row"><div class="col-md-8">

<nav class="gcweb-menu" typeof="SiteNavigationElement">
	<h2 class="wb-inv">Menu</h2>
	<button type="button" aria-haspopup="true" aria-expanded="false">Menu<span class="wb-inv"> principal</span> <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
	<ul role="menu" aria-orientation="vertical" data-ajax-replace="https://www.canada.ca/content/dam/canada/sitemenu/sitemenu-v2-fr.html"><li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/emplois.html">Emplois et milieu de travail</a></li>
		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/immigration-citoyennete.html">Immigration et citoyenneté</a></li>
		<li role="presentation"><a role="menuitem" href="https://voyage.gc.ca/">Voyage et tourisme</a></li>
		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/entreprises.html">Entreprises et industrie</a></li>
		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/prestations.html">Prestations</a></li>
		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/sante.html">Santé</a></li>
		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/impots.html">Impôts</a></li>
		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/environnement.html">Environnement et ressources naturelles</a></li>
		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/defense.html">Sécurité nationale et défense</a></li>
		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/culture.html">Culture, histoire et sport</a></li>
		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/police.html">Services de police, justice et urgences</a></li>
		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/transport.html">Transport et infrastructure</a></li>
		<li role="presentation"><a role="menuitem" href="https://international.gc.ca/world-monde/index.aspx?lang=fra">Canada et le monde</a></li>
		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/finance.html">Argent et finances</a></li>
		<li role="presentation"><a role="menuitem" href="https://www.canada.ca/fr/services/science.html">Science et innovation</a></li></ul>
</nav>

</div></div></div>

<nav id="wb-bc" property="breadcrumb">
	<h2>Vous êtes ici :</h2>
	<div class="container">
		<ol class="breadcrumb" typeof="BreadcrumbList">
			<li property="itemListElement" typeof="ListItem">
				<a property="item" typeof="WebPage" href="https://www.canada.ca/fr.html">
					<span property="name">Canada.ca</span>
				</a>
				<meta property="position" content="1">
			</li>
		</ol>
	</div>
</nav>

</header>

Évaluation et rapport

Il n'y a pas d'évaluation ni de rapport disponible pour ce composant.

API (version 2.0)

Versions du composants	Classes CSS	Gabarit	Rendu visuel	Schéma
Version 4.0.0	n.a.	Version 4.0	Version 1.0	n.a.

Version obsolète

Version du composant	Classes CSS	Gabarit	Rendu visuel	Schéma
Version 3.0.0	n.a.	Version 3.0	Version 1.0	n.a.
Version 2.0.0	n.a.	Version 2.0	Version 1.0	n.a.
Version 1.0	n.a.	Version 1.0	Version 1.0	n.a.

Gabarit

Avant et après

Version 4.0

Aucun changement.

<header>
	<div id="wb-bnr" class="container">
		<div class="row">
			<!-- Changer de langue [version 1.1] -->
			<!-- Image de marque [version 1.0] -->
			<!-- Recherche [version 1.0] -->
		</div>
	</div>
	<hr>
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<!-- Menu du site [version 2.0] -->
			</div>
		</div>
	</div>
	<!-- Fil d'Ariane [version 1.0] -->
</header>

Incluant la section d'authentification (optionnelle)

La différence avec la version 3.0 est que la valeur pour col-xs-5 et col-xs-offset-7 a été ajusté à un "6" afin que le texte du bouton ne brise pas et demeure sur une seule ligne pour toutes les fenêtre d'affichage d'extra-extra-petite à extra-large (xs, xxs, sm, md, lg et xl).

<header>
	<div id="wb-bnr" class="container">
		<div class="row">
			<!-- Changer de langue [version 1.1] -->
			<!-- Image de marque [version 1.0] -->
			<!-- Recherche [version 1.0] -->
		</div>
	</div>
	<hr>
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<!-- Menu du site [version 2.0] -->
			</div>
			<div class="col-xs-6 col-xs-offset-6 col-md-offset-0 col-md-4">
				<!-- Section d'authentification optionnelle [version 1.0] -->
			</div>
		</div>
	</div>
	<!-- Breadcrumbs [version 1.0] -->
</header>

Version 3.0 (obsolète)

Aucun changement.

<header>
	<div id="wb-bnr" class="container">
		<div class="row">
			<!-- Changer de langue [version 1.0] -->
			<!-- Image de marque [version 1.0] -->
			<!-- Recherche [version 1.0] -->
		</div>
	</div>
	<hr>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<!-- Menu du site [version 2.0] -->
			</div>
		</div>
	</div>
	<!-- Fil d'Ariane [version 1.0] -->
</header>

Incluant la section d'authentification (optionnelle)

La version 3.0 de l'en-tête incluant la section d'authentification est obsolète mais toujours supportée et requière l'implémentation de la version 2.0 du menu GCWeb ou le code <div class="container"> a été relocalisé dans l'en-tête donc l'extérieur du composant "gcweb-menu".

<header>
	<div id="wb-bnr" class="container">
		<div class="row">
			<!-- Changer de langue [version 1.0] -->
			<!-- Image de marque [version 1.0] -->
			<!-- Recherche [version 1.0] -->
		</div>
	</div>
	<hr>
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<!-- Menu du site [version 2.0] -->
			</div>
			<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
				<!-- Section d'authentification optionnelle [version 1.0] -->
			</div>
		</div>
	</div>
	<!-- Breadcrumbs [version 1.0] -->
</header>

Versions précédentes

Version 3.0 vs Version 2.0

Version 3.0 (obsolète)

La seule différence avec la version 2.0 est que les colonnes vont rester à 8 même si la section d'authentification est présente.

<header>
		<div id="wb-bnr" class="container">
			<div class="row">
				<!-- Changer de langue [version 1.0] -->
				<!-- Image de marque [version 1.0] -->
				<!-- Recherche [version 1.0] -->
			</div>
		</div>
		<hr>
		<div class="container">
			<div class="row">
				<div class="col-md-8">
					<!-- Menu du site [version 2.0] -->
				</div>
			</div>
		</div>
		<!-- Fil d'Ariane [version 1.0] -->
	</header>

Incluant la section d'authentification (optionnelle)

Aucun changement.

<header>
		<div id="wb-bnr" class="container">
			<div class="row">
				<!-- Changer de langue [version 1.0] -->
				<!-- Image de marque [version 1.0] -->
				<!-- Recherche [version 1.0] -->
			</div>
		</div>
		<hr>
		<div class="container">
			<div class="row">
				<div class="col-md-8">
					<!-- Menu du site [version 2.0] -->
				</div>
				<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
					<!-- Section d'authentification optionnelle [version 1.0] -->
				</div>
			</div>
		</div>
		<!-- Breadcrumbs [version 1.0] -->
	</header>

Version 2.0 (obsolète)

La version 2.0 de l'en-tête est obsolète mais toujours supportée et requière l'implémentation de la version 2.0 du menu GCWeb ou le code <div class="container"> a été relocalisé dans l'en-tête donc l'extérieur du composant "gcweb-menu".

<header>
		<div id="wb-bnr" class="container">
			<div class="row">
				<!-- Changer de langue [version 1.0] -->
				<!-- Image de marque [version 1.0] -->
				<!-- Recherche [version 1.0] -->
			</div>
		</div>
		<hr>
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<!-- Menu du site [version 2.0] -->
				</div>
			</div>
		</div>
		<!-- Fil d'Ariane [version 1.0] -->
	</header>

Incluant la section d'authentification (optionnelle)

Aucun changement.

<header>
		<div id="wb-bnr" class="container">
			<div class="row">
				<!-- Changer de langue [version 1.0] -->
				<!-- Image de marque [version 1.0] -->
				<!-- Recherche [version 1.0] -->
			</div>
		</div>
		<hr>
		<div class="container">
			<div class="row">
				<div class="col-md-8">
					<!-- Menu du site [version 2.0] -->
				</div>
				<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
					<!-- Section d'authentification optionnelle [version 1.0] -->
				</div>
			</div>
		</div>
		<!-- Breadcrumbs [version 1.0] -->
	</header>

Version 2.0 vs Version 1.0

Version 2.0 (obsolète)

Cette version requière l'implémentation de la version 2.0 du menu GCWeb ou le code <div class="container"> a été relocalisé dans l'en-tête donc l'extérieur du composant "gcweb-menu".

<header>
	<div id="wb-bnr" class="container">
		<div class="row">
			<!-- Changer de langue [version 1.0] -->
			<!-- Image de marque [version 1.0] -->
			<!-- Recherche [version 1.0] -->
		</div>
	</div>
	<hr>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<!-- Menu du site [version 2.0] -->
			</div>
		</div>
	</div>
	<!-- Fil d'Ariane [version 1.0] -->
</header>

Incluant la section d'authentification (optionnelle)

Ajout de la section d'authentification.

<header>
	<div id="wb-bnr" class="container">
		<div class="row">
			<!-- Changer de langue [version 1.0] -->
			<!-- Image de marque [version 1.0] -->
			<!-- Recherche [version 1.0] -->
		</div>
	</div>
	<hr>
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<!-- Menu du site [version 2.0] -->
			</div>
			<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
				<!-- Section d'authentification optionnelle [version 1.0] -->
			</div>
		</div>
	</div>
	<!-- Breadcrumbs [version 1.0] -->
</header>

Version 1 (obsolète)

La version 1.0 de l'en-tête est obsolète mais toujours supportée.

<header>
	<div id="wb-bnr" class="container">
		<div class="row">
			<!-- Language toggle [version 1.0] -->
			<!-- Branding [version 1.0] -->
			<!-- Search [version 1.0] -->
		</div>
	</div>
	<!-- GCWeb Menu [Version 1.0] -->
	<!-- Breadcrumbs [version 1.0] -->
</header>

Exemples pratiques

En-tête Version 3.0

En-tête Version 2.0

En-tête Version 1.0

Détails de la page

Date de modification :: 2022-11-01