Theme and topic menu
<gcds-topic-menu>

Also called: global navigation, theme-based navigation.

The theme and topic menu is a navigation to the top tasks of Government of Canada websites.

• GitHub
• Figma

Theme and topic menu anatomy

1. The menu button toggles the Theme and topic menu open or closed.
2. The theme and topic list includes the pre-set main themes for Canada.ca.
3. The flyout is a list of relevant links to each topic that appears on hover. All links will load and update automatically.
4. Most requested links is a list of the most frequent actions taken in each theme. All links will load and update automatically.

Accessibility and design for the theme and topic menu

• Style the menu button label as capital letters, but write the label in sentence case (Menu), so screen readers don't read each letter individually.

• Place the theme and topic menu in the header underneath the divider line.