Get startedFoundationsPatternsComponentsTokensContentGet support
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.Support for the Long Term Support (LTS) version of the Design system will be available until September 2025. View the upgrade guide
AllAccordionCalloutContainerDetailsHero bannerListPopoverTableTextBadgeFilter chipModalNotification bannerProgress indicatorSkeleton loaderTooltipButtonButton groupCheckboxDate pickerDropdownFile uploaderIcon buttonInputRadioText areaDrawer FooterForm stepperHeaderMicrosite headerPaginationSide menuTabsBlockDividerForm itemGridIconsLinkSpacer
Side menuGitHub issues
FigmaA side navigation that helps the user navigate between pages.Related:Header, Layout
Code playground
Nav section 1HomeProfileNav section 2AboutContactNav with sub navFooBar
<div style={{ maxWidth: "250px" }}>
  <GoASideMenu>
    <GoASideMenuHeading>Nav section 1</GoASideMenuHeading>
    <a href="#">Home</a>
    <a href="#">Profile</a>
    <GoASideMenuHeading
      meta={<GoabBadge type="midtone" content="Details"></GoabBadge>}
      icon="home">
        Nav section 2
    </GoASideMenuHeading>
    <a href="#">About</a>
    <a href="#">Contact</a>
    <GoASideMenuHeading>Nav with sub nav</GoASideMenuHeading>
    <GoASideMenuGroup heading="Group heading" icon="person">
      <a href="#">Foo</a>
      <a href="#">Bar</a>
    </GoASideMenuGroup>
  </GoASideMenu>
</div>
Side menu group properties
headingstring
Group header text
iconGoAIconType
Icon placed left of the heading
mt,mr,mb,mlnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.
 Side menu heading properties
iconGoAIconType
Icon to position to the left of heading
metaReactNode
Add badges to the right of the heading
Examples
We are currently collecting contextual service examples for this component to provide as a starting point in both Figma and code libraries. To contribute examples from your service talk to the design system team.
Design
Detailed design documentation for this component can be found on its component page in Figma.
Accessibility
Accessibility documentation for this component can be found on its component page in Figma. More accessibility guidance for design and development is coming soon.
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsDesign tokensContentSubmit an issue#design-system-supportContribute to the design systemRoadmapRelease notes