GCWeb Menu

Status

Stable

Type

Canada.ca site functionality

Last review

2024-06-21

Purpose

This is the main menu for navigating throughout various sections of Canada.ca.

Working example

• Content page including GCWeb Menu v3.0
• Home page including GCWeb Menu v3.0

How to implement

Must be used along with the site Header version 2.0.

Evaluation and report

There is no evaluation and report available for this component.

API (Version 3.0)

CSS Class (v1.0)

gcweb-menu

History

Version 3.0.1

The aria-label was updated for accessibility.

Version 3.0

Same as version 2.0, but the link for "Canada and the world" was updated.

In English, the URL changes:

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

In French, the URL changes:

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

Version 2.0

List of change since version 1.0: Removal of the <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 (deprecated)

The GCWeb menu version 1.0 is deprecated but still supported.

<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>

Working example

Header and GCWeb Menu Version 1.0