Theme and topic menu - Canada.ca design pattern

Mandatory on standard pages

Institutional navigation needs

TBS is researching user pain points with the Government of Canada theme and topic menu and header.

If you identify navigation issues Canadians are experiencing on your institutional site or pages as a result of implementing the theme and topic menu, contact dto-btn@tbs-sct.gc.ca to discuss institutional navigation options.

The top tasks from all Government of Canada websites are organized into topics and then grouped into the 15 main themes of Canada.ca, represented in the theme and topic menu.

On this page

How it looks

Large screen version of the theme and topic menu with flyout open
Large screen version of global navigation menu showing the “Travel” theme navigation menu, opened to reveal 8 topics under that theme.
Small screen version of the theme and topic menu
Image of small screen version of global navigation menu triggered by user-action. The panel includes footer links at the bottom.
Small screen version of the theme and topic menu with theme submenu opened
Image of small screen version of global navigation menu triggered by user-action. The panel shows the Travel menu opened with sub-topics displayed, with Business and industry below.
Small screen version of the theme and topic menu with most requested submenu opened
Image of small screen version of global navigation menu triggered by user-action. The panel includes footer links at the bottom.

Objective

The purpose of the theme and topic menu is to help people discover or locate top-task content available in the deeper parts of the site’s information architecture.

This menu provides access to all Government of Canada content as it is available across Canada.ca. This facilitates navigation between themes, findability and access.

When to use

The theme and topic menu is mandatory on all pages, except campaign pages and transactional pages.

Mandatory elements of the design system

How to implement

The theme and topic menu must always adhere to the themes and topics for Canada.ca. The labels in this menu should correspond with the Topic tree for Canada.ca.

The global header and footer cannot be altered and must remain consistent, wherever they are used.

On large screens

  • Hovering or clicking on the menu button triggers the menu (the menu button is labeled “MENU” with a downwards caret and is located near the upper left of the site, below the Government of Canada signature)
  • Once opened, the menu reveals a list of the 15 main Canada.ca themes, arranged in the following order:
    • Jobs and the workplace
    • Immigration and citizenship
    • Travel and tourism
    • Business and industry
    • Benefits
    • Health
    • Taxes
    • Environment and natural resources
    • National security and defence
    • Culture, history and sport
    • Policing, justice and emergencies
    • Transport and infrastructure
    • Canada and the world
    • Money and finances
    • Science and innovation
  • Hovering or clicking on one of the 15 themes reveals a flyout containing the following:
    • the first item in this flyout is always a link to the landing page for the theme itself, followed by a list of topic links and then a list of most requested links
    • topics listed are the first-level topics within that theme, as per the Canada.ca topic tree
    • most requested links are based on the highest demand items for that theme. Most requested design pattern
    • topics and most requested links appearing on theme pages must match the order in which they appear in the menu
    • no additional links or text may be added to the submenus
    • the last item in this submenu is always a link to more information, leading to the landing page for the theme itself

On smaller screens

  • Tapping on the menu button triggers the menu (the menu is labeled "MENU" with a downwards caret, and is located in the upper left of the site, below the Government of Canada signature and site search box)
  • Once opened, the menu reveals a list of the 15 main Canada.ca themes, arranged in the same order as on large screens
  • Tapping on one of the 15 themes reveals the top topics for that theme, followed by a submenu containing the most requested links
    • Tapping triggers the most requested submenu
    • All items in these submenus must correspond to what appears on large screens
  • The menu may be dismissed with a close button (labeled “Close” with a large “X” beside it) placed in the upper-right corner of the menu panel
Date modified: