Menu GCWeb

Statut

Stable

Type

Fonctionnalité du site Canada.ca

Dernière révision

2024-06-21

Objectif

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

Example pratique

• Page de contenu incluant le menu GCWeb version 3.0
• Page d'accueil incluant le menu GCWeb version 3.0

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.0)

Classe CSS (v1.0)

gcweb-menu

Historique

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