Headers
Headers help users identify where they are and provide a quick, organized way to reach the main sections of a website or features of the product.
Global header
The global header is intended for use on all pages within the City of Winnipeg public website. They are available in English and French.
Best practices
- The header should always contain the City logo, top level navigation, and the search function.
- A ‘Contact 311’ CTA should always be present in the header.
- Avoid hiding important navigation items in a hamburger menu on large screens.
Examples
See our basic page example and basic French page example for the global headers in use.
English global header
<!--stopindex-->
<!-- #include virtual="/shared/includes/alert/alert-global-ds.htm" -->
<header class="global-header" style="background-image: url(/designsystem/assets/img/header-bg-lg.png);">
<div class="container clearfix">
<a class="logo" aria-label="City of Winnipeg homepage" href="https://winnipeg.ca">
<img alt="City of Winnipeg logo" src="/designsystem/assets/img/cw-v-white-rgb.svg">
</a>
<div class="mobile-nav">
<button class="btn langBtn languagelink">
<span class="far fa-globe" aria-hidden="true"></span>
Français
</button>
<button class="btn menuBtn">
<span class="far fa-bars" aria-hidden="true"></span>
Menu
</button>
<button class="btn searchBtn">
<span class="fas fa-search" aria-hidden="true"></span>
Search
</button>
</div>
<div class="search-group-container clearfix">
<form action="https://winnipeg.ca/search/default.stm">
<div class="form-group search-group sm">
<input id="globalSearchInput" type="search" name="q" class="form-control form-control-sm dark google-search google-search-header" aria-label="Search the City of Winnipeg">
<button disabled id="globalSearchBtn" type="submit" aria-label="Search the City of Winnipeg" class="btn btn-sm btn-search dark"><i aria-hidden="true" class="far fa-search"></i></button>
</div>
</form>
</div>
<div class="language-container">
<a class="accent languagelink" href="https://winnipeg.ca/francais/interhom/default.asp" id="francaislink" name="francaislink" aria-label="Français">Français</a>
</div>
<nav class="main-nav">
<ul class="list-unstyled no-inline-links">
<li><a href="https://winnipeg.ca/interhom/toc/residents.asp">Residents</a></li>
<li><a href="https://winnipeg.ca/interhom/toc/business.asp">Business</a></li>
<li><a href="https://winnipeg.ca/interhom/toc/visitors.asp">Visitors</a></li>
<li><a href="https://winnipeg.ca/interhom/toc/cityhall.asp">City Hall</a></li>
<li><a href="https://winnipeg.ca/interhom/toc/departments.asp">Departments</a></li>
<li><a class="accent" href="https://winnipeg.ca/311/default.asp">311 City services</a></li>
</ul>
</nav>
</div>
</header>
<div class="header-gradient headerGradient">
<button aria-label="Close menu" class="btn link-btn header-close-btn headerCloseBtn">
<span class="far fa-times" aria-hidden="true"></span>
</button>
</div>
<!--startindex-->French global header
<!--stopindex-->
<!-- #include virtual="/shared/includes/alert/alert-global-ds.htm" -->
<header class="global-header" style="background-image: url(/designsystem/assets/img/header-bg-lg.png);">
<div class="container clearfix">
<a class="logo" aria-label="Page d'accueil de la ville de Winnipeg" href="https://winnipeg.ca/francais/">
<img alt="Logo de la ville de Winnipeg" src="/designsystem/assets/img/cw-v-white-rgb.svg">
</a>
<div class="mobile-nav">
<button class="btn langBtn languagelink">
<span class="far fa-globe" aria-hidden="true"></span>
English
</button>
<button class="btn menuBtn">
<span class="far fa-bars" aria-hidden="true"></span>
Menu
</button>
<button class="btn searchBtn">
<span class="fas fa-search" aria-hidden="true"></span>
Recherche
</button>
</div>
<div class="search-group-container clearfix">
<form action="https://winnipeg.ca/francais/search/default.stm">
<div class="form-group search-group sm">
<input id="globalSearchInput" type="search" name="q" class="form-control form-control-sm dark google-search google-search-header" aria-label="Recherche la ville de Winnipeg">
<button disabled id="globalSearchBtn" type="submit" aria-label="Recherche – Ville de Winnipeg" class="btn btn-sm btn-search dark"><i aria-hidden="true" class="far fa-search"></i></button>
</div>
</form>
</div>
<div class="language-container">
<a class="accent languagelink" href="https://winnipeg.ca/interhom/default.asp" id="englishlink" name="englishlink" aria-label="English">English</a>
</div><nav class="main-nav">
<ul class="list-unstyled no-inline-links">
<li><a href="https://winnipeg.ca/francais/interhom/toc/residents.asp">Résidents</a></li>
<li><a href="https://winnipeg.ca/francais/interhom/toc/business.asp">Entreprises</a></li>
<li><a href="https://winnipeg.ca/francais/interhom/toc/visitors.asp">Visiteurs</a></li>
<li><a href="https://winnipeg.ca/francais/interhom/toc/cityhall.asp">Hôtel de ville</a></li>
<li><a href="https://winnipeg.ca/francais/interhom/toc/departments.asp">Services</a></li>
<li><a class="accent" href="https://winnipeg.ca/francais/311/default.asp">Service 311 de la Ville</a></li>
</ul>
</nav>
</div>
</header>
<div class="header-gradient headerGradient">
<button aria-label="Fermer le menu" class="btn link-btn header-close-btn headerCloseBtn">
<span class="far fa-times" aria-hidden="true"></span>
</button>
</div>
<!--startindex-->Javascript
Add the following JavaScript for the search input, mobile menu and mobile search bar functionality:
// Search bar
$('#globalSearchInput').keyup(function(){
if($(this).val() === ''){
$('#globalSearchBtn').attr("disabled", true);
}else{
$('#globalSearchBtn').attr("disabled", false);
}
});
// Mobile menu
function openMenu(){
$('html').scrollTop( 0 );
$('.headerGradient').fadeIn(200);
$('.headerGradient').addClass('menuOpen');
$('nav.main-nav').addClass('in');
$('body').css({'position':'fixed','left':0,'right':0, 'top':0});
}
function closeMenu(){
$('.headerGradient').fadeOut(200);
$('.headerGradient').removeClass('menuOpen');
$('nav.main-nav').removeClass('in');
$('body').css({'position':'initial','left':'auto','right':'auto','top':'auto'});
}
$('.menuBtn').click(function() {
openMenu();
})
// Mobile search
function openSearch(){
$('html').scrollTop( 0 );
$('.headerGradient').fadeIn(200);
$('.global-header .search-group-container').addClass('in');
$('.global-header .search-group-container input').focus();
$('body').css({'position':'fixed','left':0,'right':0, 'top':0});
}
function closeSearch(){
$('.headerGradient').fadeOut(200);
$('.global-header .search-group-container').removeClass('in');
$('body').css({'position':'initial','left':'auto','right':'auto','top':'auto'});
}
$('.searchBtn').click(function() {
openSearch();
})
// Close search and menu on gradient click
$('.headerGradient, .headerCloseBtn').click(function() {
closeMenu();
closeSearch();
})Vertical header
The vertical header is intended for use on all internally produced applications outside of the main public website.
Best practices
- Wherever possible, limit the number of parent navigation items to 10 and the children within a parent section to 15. Note: These numbers should be treated as absolute upper limits, not targets.
- Parent items with children should always include a chevron. Parent items without children don’t require a chevron.
- The search field is optional and depends on the scope of the product.
Example
See a live example of this to the left.
<header class="mobile-vertical-header-nav">
<nav class="clearfix">
<a class="logo" aria-label="Confluence: The City of Winnipeg's design system" href="/designsystem/"><img alt="City of Winnipeg logo" src="/designsystem/assets/img/cw-v-white-rgb.svg"></a>
<div class="float-right">
<button class="btn verticalHeaderBtn">
<span class="far fa-bars" aria-hidden="true"></span>
Menu
</button>
</div>
</nav>
</header>
<header class="vertical-header">
<nav class="sidenav">
<section class="logo-section">
<a aria-label="Confluence: The City of Winnipeg's design system" href="/designsystem/"><img alt="City of Winnipeg logo" src="/designsystem/assets/img/cw-v-white-rgb.svg"></a>
<p class="white mt-3">Confluence: The City of Winnipeg's design system</p>
</section>
<!-- <form action="/designsystem/search-results">
<div class="search-group sm">
<input required id="searchInput" type="search" class="form-control dark form-control-sm" name="query" placeholder="Search the design system" aria-label="Search">
<button disabled type="submit" aria-label="Search the City of Winnipeg design system" class="btn btn-sm dark btn-search" id="searchBtn"><i aria-hidden="true" class="far fa-search"></i></button>
</div>
</form> -->
<section >
<button id="gettingStarted" data-target="#gettingStartedCollapse" aria-expanded="false" aria-controls="gettingStartedCollapse" class="btn btn-sidebar sidebarBtn">Getting started<i class="far fa-chevron-down "></i></button>
<ul id="gettingStartedCollapse" aria-labelledby="gettingStarted" class="no-inline-links">
<li><a href="/designsystem/getting-started/overview">Overview</a></li>
<li><a href="/designsystem/getting-started/bootstrap-classes">Bootstrap classes</a></li>
</ul>
</section>
<section >
<button id="foundations" data-target="#foundationsCollapse" aria-expanded="false" aria-controls="foundationsCollapse" class="btn btn-sidebar sidebarBtn">Foundations<i class="far fa-chevron-down "></i></button>
<ul id="foundationsCollapse" aria-labelledby="foundations" class="no-inline-links">
<li><a href="/designsystem/foundations/accessibility">Accessibility</a></li>
<li><a href="/designsystem/foundations/colour">Colour</a></li>
<li><a href="/designsystem/foundations/grid">Grid</a></li>
<li><a href="/designsystem/foundations/iconography">Iconography</a></li>
<li><a href="/designsystem/foundations/typography">Typography</a></li>
<li><a href="/designsystem/foundations/usability">Usability</a></li>
<li><a href="/designsystem/foundations/value">Value</a></li>
<li><a href="/designsystem/foundations/writing-and-language">Writing and language</a></li>
</ul>
</section>
<section >
<button id="components" data-target="#componentsCollapse" aria-expanded="false" aria-controls="componentsCollapse" class="btn btn-sidebar sidebarBtn">Components<i class="far fa-chevron-down "></i></button>
<ul id="componentsCollapse" aria-labelledby="components" class="no-inline-links">
<li><a href="/designsystem/components/accordions">Accordions</a></li>
<li><a href="/designsystem/components/alerts">Alerts</a></li>
<li><a href="/designsystem/components/badges">Badges</a></li>
<li><a href="/designsystem/components/breadcrumbs">Breadcrumbs</a></li>
<li><a href="/designsystem/components/buttons">Buttons</a></li>
<li><a href="/designsystem/components/callouts">Callouts</a></li>
<li><a href="/designsystem/components/cards">Cards</a></li>
<li><a href="/designsystem/components/embedded-content">Embedded content</a></li>
<li >
<button id="forms" data-target="#formsCollapse" aria-expanded="false" aria-controls="formsCollapse" class="btn btn-sidebar sidebarBtn">Forms<i class="far fa-chevron-down "></i></button>
<ul id="formsCollapse" aria-labelledby="components" class="no-inline-links">
<li><a href="/designsystem/components/forms/forms-overview">Forms overview</a></li>
<li>
<button id="formTemplates" data-target="#formTemplatesCollapse" aria-expanded="false" aria-controls="formTemplatesCollapse" class="btn btn-sidebar sidebarBtn btn-sidebar-secondary">Form templates<i class="far fa-chevron-down "></i></button>
<ul id="formTemplatesCollapse" aria-labelledby="formTemplates" class="no-inline-links">
<li><a href="/designsystem/forms/templates/contact-forms">Contact forms</a></li>
<li><a href="/designsystem/forms/templates/forgot-your-password">Forgot your password</a></li>
<li><a href="/designsystem/forms/templates/name-and-address-forms">Name and address forms</a></li>
<li><a href="/designsystem/forms/templates/sign-in">Sign in</a></li>
<li><a href="/designsystem/forms/templates/sign-up">Sign up</a></li>
<li><a href="/designsystem/forms/templates/subscription-forms">Subscription forms</a></li>
</ul>
</li>
<li><a href="/designsystem/components/forms/checkboxes-and-radios">Checkboxes and radio buttons</a></li>
<li><a href="/designsystem/components/forms/date-pickers">Date pickers</a></li>
<li><a href="/designsystem/components/forms/fieldsets">Fieldsets</a></li>
<li><a href="/designsystem/components/forms/file-inputs">File inputs</a></li>
<li><a href="/designsystem/components/forms/range-inputs">Range inputs</a></li>
<li><a href="/designsystem/components/forms/selects">Selects</a></li>
<li><a href="/designsystem/components/forms/switches">Switches</a></li>
<li><a href="/designsystem/components/forms/text-inputs">Text inputs</a></li>
<li><a href="/designsystem/components/forms/validation">Validation</a></li>
</ul>
</li>
<li><a href="/designsystem/components/modals">Modals</a></li>
<li><a href="/designsystem/components/pagination">Pagination</a></li>
<li><a href="/designsystem/components/sidebar-navigation">Sidebar navigation</a></li>
<li><a href="/designsystem/components/tables">Tables</a></li>
<li><a href="/designsystem/components/tabs">Tabs</a></li>
<li><a href="/designsystem/components/tooltips">Tooltips</a></li>
</ul>
</section>
<section class="show">
<button id="patterns" data-target="#patternsCollapse" aria-expanded="true" aria-controls="patternsCollapse" class="btn btn-sidebar sidebarBtn">Patterns<i class="far fa-chevron-up "></i></button>
<ul id="patternsCollapse" aria-labelledby="patterns" class="no-inline-links">
<li><a href="/designsystem/patterns/footers">Footers</a></li>
<li class="active"><a href="/designsystem/patterns/headers">Headers</a></li>
<li><a href="/designsystem/patterns/hero-banners">Hero banners</a></li>
<li><a href="/designsystem/patterns/search">Search</a></li>
</ul>
</section>
<section>
<a class="section-link " href="/designsystem/page-templates">Page templates</a>
</section>
</nav>
</header>
<div class="vertical-header-gradient verticalHeaderGradient">
<button aria-label="Close menu" class="btn link-btn vertical-header-close-btn verticalHeaderCloseBtn">
<span class="far fa-times" aria-hidden="true"></span>
</button>
</div>Add the following JavaScript for the search bar, section toggle and mobile menu functionality:
// Search form
$('#searchInput').keyup(function(){
if($(this).val() === ''){
$('#searchBtn').attr("disabled", true);
}else{
$('#searchBtn').attr("disabled", false);
}
});
// Dropdown toggles
$('.sidebarBtn').click(function() {
$(this).find('i').toggleClass('fa-chevron-up fa-chevron-down');
if($(this).attr('aria-expanded') == true){
$(this).attr({'aria-expanded': false});
}else{
$(this).attr({'aria-expanded': true});
}
$(this).next('ul').slideToggle();
});
// Mobile menu
function openVerticalHeader(){
$('html').scrollTop( 0 );
$('.verticalHeaderGradient').fadeIn(200);
$('header.vertical-header').addClass('in');
$('body').css({'position':'fixed','left':0,'right':0,'top':0});
}
function closeVerticalHeader(){
$('.verticalHeaderGradient').fadeOut(200);
$('header.vertical-header').removeClass('in');
$('body').css({'position':'initial','left':'auto','right':'auto','top':'auto'});
}
$('.verticalHeaderBtn').click(function() {
openVerticalHeader();
})
$('.verticalHeaderGradient, .verticalHeaderCloseBtn').click(function() {
closeVerticalHeader();
})Accessibility
Be sure to add aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded="false". If you’ve set the collapsible element to be open by default using the show class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role="button" should be added to the element.
If your control element is targeting a single collapsible element – i.e. the data-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
Note that Bootstrap’s current implementation does not cover the various keyboard interactions described in the WAI-ARIA Authoring Practices 1.1 accordion pattern - you will need to include these yourself with custom JavaScript.
Universal header
The universal header is intended for use on all third party products and services that might have their own global header and global components (product logo, navigation, search etc.). The universal header is not intended to be present on screens that have the global or vertical header.
Best practices
- The universal header should always include a horizontal City of Winnipeg logo, copy stating ‘This is an official City of Winnipeg website,’ and a link to https://winnipeg.ca.
- The universal header should only be used on third party applications where we don’t have control over navigation or global (or application level) headers and footers. When building an application or product, use the vertical header.
Example
This is an official City of Winnipeg website
<header class="universal-header" style="background-image: url(/designsystem/assets/img/header-bg.png);">
<div class="container-fluid">
<a aria-label="City of Winnipeg" href="https://winnipeg.ca"><img alt="City of Winnipeg logo" src="/designsystem/assets/img/cv-h-white-rgb.svg"></a>
<span class="small">This is an official City of Winnipeg website</span>
</div>
</header>