GCWeb Menu

Status

Stable

Type

Canada.ca site functionality

Last review

2025-05-26

Purpose

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

Working example

Use this page as the working example

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

CSS Class (v1.0)

gcweb-menu

History

Version 3.1

Added a new link to the menu for "Manage life events".

In English the link is to the following page:

• Manage life events

In French, the link is to the following page:

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

Version 3.0.2

Update the width for the sub-menu at medium breakpoints.

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