GCWeb Menu
- Status
- Stable
- Type
- Canada.ca site functionality
- Last review
- 2022-05-26
Purpose
This is the main menu for navigating throughout various sections of Canada.ca.
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 2.0)
| CSS Class | Template | Visual rendering | Schema |
|---|---|---|---|
| Version 1.0 | Version 2.0 | Version 1.0 | n.a. |
CSS Class (v1.0)
gcweb-menu
Before and After
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
Page details
- Date modified: