GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

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 component preview

Theme and topic menu anatomy

  • The menu button toggles the Theme and topic menu open or closed.
  • The theme and topic list includes the pre-set main themes for Canada.ca.
  • The flyout is a list of relevant links to each topic that appears on hover. All links will load and update automatically.
  • Most requested links is a list of the most frequent actions taken in each theme. All links will load and update automatically.
The theme and topic menu with numbers pointing to individual parts of the component’s anatomy.

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.
Help us improve Have questions or a request? Give feedback on our contact form. Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others. Give feedback Report an issue on GitHub
2024-12-11