Header
- Status
- Stable
- Type
- Canada.ca site functionality
- Last review
- 2022-08-31
Purpose
Displays the portion of the header section that's underneath the banner.
Can contain the following components:
- GCWeb Menu
- Authentication
Working example
How to implement
This version requires the implementation of the gcweb-menu version 3.0 where the <div class="container"> has been relocated in the header so outside the "gcweb-menu" component.
Here is a code sample showing all the commonly included components where some may require some customization by your web content management system such as the breadcrumb component.
<nav>
<ul id="wb-tphp">
<li class="wb-slc"><a class="wb-sl" href="#wb-cont">Skip to main content</a></li>
<li class="wb-slc visible-sm visible-md visible-lg"><a class="wb-sl" href="#wb-info">Skip to About this site</a></li>
</ul>
</nav>
<header>
<div id="wb-bnr" class="container"><div class="row">
<section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
<h2 class="wb-inv">Language selection</h2>
<ul class="list-inline mrgn-bttm-0">
<li><a lang="fr" hreflang="fr" href="header-docs-fr.html">
<span class="hidden-xs" translate="no">Français</span>
<abbr title="Français" translate="no" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase">fr</abbr>
</a></li>
</ul>
</section>
<div class="brand col-xs-9 col-sm-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
<a href="https://www.canada.ca/en.html" property="url">
<img src="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/assets/sig-blk-en.svg" alt="Government of Canada" property="logo" /><span class="wb-inv"> / <span lang="fr">Gouvernement du Canada</span></span>
</a>
<meta property="name" content="Government of Canada">
<meta property="areaServed" typeof="Country" content="Canada" />
<link property="logo" href="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/assets/wmms-blk.svg" />
</div>
<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
<h2>Search</h2>
<form action="https://www.canada.ca/en/sr/srb.html" name="cse-search-box" role="search">
<div class="form-group wb-srch-qry">
<label for="wb-srch-q" class="wb-inv">Search Canada.ca</label>
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca" />
<datalist id="wb-srch-q-ac"></datalist>
</div>
<div class="form-group submit">
<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button>
</div>
</form>
</section>
</div></div>
<hr>
<div class="container"><div class="row"><div class="col-md-8">
<nav class="gcweb-menu" typeof="SiteNavigationElement">
<h2 class="wb-inv">Menu</h2>
<button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
<ul role="menu" aria-orientation="vertical" data-ajax-replace="https://www.canada.ca/content/dam/canada/sitemenu/sitemenu-v2-en.html"><li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/jobs.html">Jobs and the workplace</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship</a></li>
<li role="presentation"><a role="menuitem" href="https://travel.gc.ca/">Travel and tourism</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/business.html">Business and industry</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/benefits.html">Benefits</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/health.html">Health</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/taxes.html">Taxes</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/environment.html">Environment and natural resources</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/defence.html">National security and defence</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/culture.html">Culture, history and sport</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/policing.html">Policing, justice and emergencies</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/transport.html">Transport and infrastructure</a></li>
<li role="presentation"><a role="menuitem" href="https://international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/finance.html">Money and finances</a></li>
<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/science.html">Science and innovation</a></li></ul>
</nav>
</div></div></div>
<nav id="wb-bc" property="breadcrumb">
<h2>You are here:</h2>
<div class="container">
<ol class="breadcrumb" typeof="BreadcrumbList">
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="https://www.canada.ca/en.html">
<span property="name">Canada.ca</span>
</a>
<meta property="position" content="1">
</li>
</ol>
</div>
</nav>
</header>Evaluation and report
There is no evaluation and report available for this component.
API (Version 2.0)
| Component version | CSS Class | Template | Visual rendering | Schema |
|---|---|---|---|---|
| Version 4.0.0 | n.a. | Version 4.0 | Version 1.0 | n.a. |
Deprecated version
| Component version | CSS Class | Template | Visual rendering | Schema |
|---|---|---|---|---|
| Version 3.0.0 | n.a. | Version 3.0 | Version 1.0 | n.a. |
| Version 2.0.0 | n.a. | Version 2.0 | Version 1.0 | n.a. |
| Version 1.0 | n.a. | Version 1.0 | Version 1.0 | n.a. |
Template
Before and After
Version 4.0
No change
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Language toggle [version 1.1] -->
<!-- Branding [version 1.0] -->
<!-- Search [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Including authentication section (optional)
The difference with version 3.0 is the value for col-xs-5 and col-xs-offset-7 have been adjusted to a "6" so the button text don't brake and stays on one line for every viewports from extra-extra-small to extra-large (xxs, xxs, sm, md, lg and xl).
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Language toggle [version 1.1] -->
<!-- Branding [version 1.0] -->
<!-- Search [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
<div class="col-xs-6 col-xs-offset-6 col-md-offset-0 col-md-4">
<!-- Optional Authentication Section [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Version 3.0 (deprecated)
No change
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Language toggle [version 1.0] -->
<!-- Branding [version 1.0] -->
<!-- Search [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Including authentication section (optional)
The header version 3.0 including the authentication section is deprecated but still supported and requires the implementation of the gcweb-menu version 2.0 where the <div class="container"> has been relocated in the header so outside the "gcweb-menu" component.
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Language toggle [version 1.0] -->
<!-- Branding [version 1.0] -->
<!-- Search [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
<!-- Optional Authentication Section [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Previous versions
Version 3.0 vs Version 2.0
Version 3.0 (deprecated)
The only difference with version 2.0 is that the column will remain at 8 whether there is an authentication section or not.
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Language toggle [version 1.0] -->
<!-- Branding [version 1.0] -->
<!-- Search [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Including authentication section (optional)
No change
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Language toggle [version 1.0] -->
<!-- Branding [version 1.0] -->
<!-- Search [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
<!-- Optional Authentication Section [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Version 2.0 (deprecated)
The header version 2.0 is deprecated but still supported and requires the implementation of the gcweb-menu version 2.0 where the <div class="container"> has been relocated in the header so outside the "gcweb-menu" component.
No change
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Language toggle [version 1.0] -->
<!-- Branding [version 1.0] -->
<!-- Search [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Site Menu [version 2.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Including authentication section (optional)
No change.
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Language toggle [version 1.0] -->
<!-- Branding [version 1.0] -->
<!-- Search [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
<!-- Optional Authentication Section [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Version 2.0 vs Version 1.0
Version 2.0 (deprecated)
This version requires the implementation of the gcweb-menu version 2.0 where the <div class="container"> has been relocated in the header so outside the "gcweb-menu" component.
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Language toggle [version 1.0] -->
<!-- Branding [version 1.0] -->
<!-- Search [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Site Menu [version 2.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Including authentication section (optional)
Addition of the authentication section.
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Language toggle [version 1.0] -->
<!-- Branding [version 1.0] -->
<!-- Search [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
<!-- Optional Authentication Section [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Version 1.0 (deprecated)
The header version 1.0 is deprecated but still supported.
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Language toggle [version 1.0] -->
<!-- Branding [version 1.0] -->
<!-- Search [version 1.0] -->
</div>
</div>
<!-- Site Menu [Version 1.0]
<!-- Breadcrumbs [version 1.0] -->
</header>Working examples
Header Version 3.0
Header Version 2.0
Header Version 1.0
Page details
- Date modified: