Menu GCWeb

Statut

Stable

Type

Fonctionnalité du site Canada.ca

Dernière révision

2025-05-26

Objectif

Menu principal afin de naviguer les diverses sections de Canada.ca.

Example pratique

Utilisez cette page comme exemple de travail

Comment mettre en œuvre

Doit être utilisé accompagné de la version 2.0 de l'entête.

Évaluation et rapport

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

API (version 3.1)

Classe CSS (v1.0)

gcweb-menu

Historique

Version 3.1

Ajout d'un nouveau lien au menu pour "Gérer les événements de la vie".

En anglais, le lien mène à la page suivante:

• Manage life events

En français, le lien mène à la page suivante :

• Gérer les événements de la vie

Version 3.0.2

Mise à jour la largeur du sous-menu au point d'arrêt moyen.

Version 3.0.1

Le aria-label a été mis à jour pour des raisons d'accessibilité.

Version 3.0

Identique à la version 2.0, mais le lien vers « Canada et le monde » a été mis à jour.

En anglais, l'URL change :

• de https://international.gc.ca/world-monde/index.aspx?lang=eng
• à https://www.international.gc.ca/world-monde/index.aspx?lang=eng

En français, l'URL change :

• de https://international.gc.ca/world-monde/index.aspx?lang=fra
• à https://www.international.gc.ca/world-monde/index.aspx?lang=fra

Version 2.0

Liste des changements depuis la version 1.0 : Suppression du <div class="container">.

<nav class="gcweb-menu" typeof="SiteNavigationElement">
	<h2 class="wb-inv">{{ i18nText-menu }}</h2>
	<button type="button" aria-haspopup="true" aria-expanded="false">{{ i18nText-menuBtn }} <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
	<ul role="menu" aria-orientation="vertical" data-ajax-replace="{{ i18nText-menuAjax }}">
{%- if i18nText-lang == "fr" -%}
		...
{%- elsif i18nText-lang == "en" -%}
		...
{%- endif -%}
	</ul>
</nav>

Version 1.0 (obsolète)

La version 1.0 du menu est obsolète mais toujours supportée.

<nav class="gcweb-menu" typeof="SiteNavigationElement">
	<div class="container">
		<h2 class="wb-inv">{{ i18nText-menu }}</h2>
		<button type="button" aria-haspopup="true" aria-expanded="false">{{ i18nText-menuBtn }} <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
		<ul role="menu" aria-orientation="vertical" data-ajax-replace="{{ i18nText-menuAjax }}">
{%- if i18nText-lang == "fr" -%}
			...
{%- elsif i18nText-lang == "en" -%}
			...
{%- endif -%}
		</ul>
	</div>
</nav>

Exemple pratique

Version 1.0 de l'entête et du menu GCWeb