Layered theme page: Canada.ca design
Mandatory
Last updated 2026-07-30
The layered theme page works as a series of pages performing the role of the primary navigation on Canada.ca. Theme pages provide access to topics and destination pages that support task completion. This allows users to navigate government-wide content through one of the main themes rather than by institutions. These pages also prioritize content and navigation by presenting the most visited information and services first.
On this page
When to use
The layered theme template can only be used for theme pages. Only theme leads can use this template.
What to avoid
Do not use the left-hand navigation pattern from this template on any other page type. This is for use on layered theme pages only.
Do not put any links to social media channels. Instead, put these on topic pages.
Content and design
The theme title must be a unique H1 and the first component on the page.
- If your theme page is built in AEM, use the introduction block component to populate the H1. Do not enable any other elements within the introduction block.
Include the Most requested band below the theme title to feature top tasks. Use the most requested band pattern.
Add a link and brief description, also called doormats, for each theme-specific topic included on the page. Don’t repeat any of the links from the Most requested band. Use the 2 column variation of the services and information pattern.
Include a contextual band in your footer. Use the contextual band pattern.
The sign in button is included by default and will link to the general sign-in page. You can customize the link and button name to go to a specific sign-in page or a page managing multiple accounts for your theme. For pages that provide access to multiple accounts, use a label such as “CRA sign in” or “IRCC sign in”. Otherwise use a label specific to the account, such as “Sign in to [account name]”. See the contextual Sign in button pattern.
You can include alerts when there is an urgent service disruption. Alerts appear below the H1 in the main content area. See the guidance for using alerts during a crisis.
You can include up to three context-specific features above the footer. See the context-specific features pattern.
You can include a featured link when there is a need for a significant and temporary feature. See the featured link pattern.
Customization requests will be considered on a case-by-case basis if your theme has the ability to research and monitor the impact of the customization. Please contact the Canada.ca Experience Office with any requests to deviate from the established template:
Visual examples
Image description: layered theme navigation page - large screen
The layered theme navigation page consists of a left-hand navigation including all the themes, and the content of the selected theme appears on the right. The theme “Jobs” is selected and is highlighted in dark blue. A thick dark blue bar visually separates the navigation from the content.
The active theme content includes the theme heading, most requested items in a band, which is then followed by links and descriptions in two columns to navigate further into the theme. The theme navigation section is followed by the “Features” heading, three context-specific features, and a contextual footer containing the theme’s contact information.
Image description: layered theme navigation page - small screen
On mobile the layered theme navigation page is a dark blue band that runs across the top with the text “Menu” and a chevron pointing down. When the user clicks the menu expands to expose all the themes and hides the page content and global footer main band.
The active theme content includes the theme heading, most requested items in a band, which is then followed by links and descriptions in a single column to navigate further into the theme. Below the theme navigation section is the heading “Features” and three context-specific features for the theme and a contextual footer for the theme’s contact information.
How to implement
Find working examples and code for implementing the layered theme page.
GCWeb (WET-BOEW) theme implementation reference
The implementation reference includes how to configure the layered theme page.
Research and rationale
Consult research findings and policy rationale.
Research findings
Wayfinding on Canada.ca research summary
Research showing that people navigating on the site use breadcrumb links nearly twice as often as they use the theme and topic menu.
Policy rationale
The layered theme page is a mandatory template under the Canada.ca Specifications.
Latest changes
-
Stabilized and launched the layered theme page.
-
Updated the pattern to remove any reference to topic pages. Topic pages are now a separate pattern.
-
- Changes to doormat columns in tablet view
- Clarify social media account guidance
-
A new beta version of this template was added.
Page details
- Date modified: