Header

The header is the primary branding and navigational anchor for government websites. It appears at the top of every page and includes key elements such as the government logo, site title, main navigation, and optional tools like language switchers or search.

This component plays a crucial role in delivering a consistent experience across government services, helping users recognize they’re on an official site, and providing easy access to important destinations.

When to use

• On all public-facing government websites and digital services.
• When a consistent look and feel is required across multiple departmental or program sites.
• To reinforce trust and brand recognition by displaying an official logo and unified navigation.
• When supporting features like language toggle, search, or utility links are needed in the global header area.

Included components

Language switcher

The language toggle is included in the top right of the header and allows users to switch between official languages (e.g., English and French). It should:

• Use a clear toggle button or link, with the current language visible if multiple languages are available.
• Load the equivalent content in the selected language.
• Maintain consistent behavior across all pages.

Search

The search input provides access to site-wide or service-wide content. It includes:

• A visually prominent field with clear placeholder text.
• A keyboard-accessible button to trigger search.

Drawer-style menu

The header includes a full-screen drawer-style menu that opens on user interaction. This menu provides a centralized view of all major navigation links across the site, organized into clear, scannable sections.

Features of the drawer menu:

• Primary navigation: Grouped by major government service areas (e.g., Health, Education, Housing), arranged in a grid layout for easy scanning.
• Utility navigation: Displayed in a distinct column, typically aligned to the right, for quick access to site-wide services such as:
  • Contact
  • News and Events
  • Careers
  • Have Your Say
  • Resource Library
  • Boards and Committees

This layout ensures that users can quickly orient themselves and access both core service areas and site utilities without needing to scroll or explore multiple levels of navigation. It is designed to be fully responsive, accessible by keyboard, and screen reader friendly.