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

Build a theme and topic menu

Use the theme and topic menu to provide global navigation to Government of Canada sites.

Coding and accessibility for theme and topic menu

Use the theme and topic menu with other components

Add the theme and topic menu directly to the header component by passing a child element with the slot="menu" attribute in the header. This will place the theme and topic menu in the header after the language toggle, signature, and search slots.

Note: If applying the theme and topic menu to the front page of Canada.ca, use the home attribute to render with the correct styling.

Get your code

Generate an instance of the component you need by selecting its code properties.

1. Explore by choosing different code values to generate the instance you want.

2. Get the code and pull it into your environment.

3. Add any copy you need to the component (like text for a label).

Note: Following standard practice, the code builder uses English for all code elements.