Get startedFoundationsPatternsComponentsStylesContentSupportReport a bug
AllAccordionBadgeBlockButtonButton groupCalloutCheckboxChipContainerDate pickerDetailsDividerDropdownFile uploaderFooterForm itemForm stepperGridHeaderHero bannerIconsIcon buttonInputListMicrosite headerModalNotification bannerPaginationPopoverProgress indicatorRadioSide menuSkeleton loadingSpacerTableTabsText areaTooltip

Side menu

A side navigation that helps the user navigate between pages.

Related components: Header, Layout
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 icon="home">
      Nav section 2
    </GoASideMenuHeading>
    <a href="#">About</a>
    <a href="#">Contact</a>
    <GoASideMenuHeading>
      Nav with sub nav
    </GoASideMenuHeading>
    <GoASideMenuGroup heading="Group heading">
      <a href="#">Foo</a>
      <a href="#">Bar</a>
    </GoASideMenuGroup>
  </GoASideMenu>
</div>
Show more
headingstring
Group header text
iconGoAIconType
Icon to position to the left of heading
metaReactNode
Add badges to the right of the heading

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 startedPatternsComponentsStylesSubmit an issue#design-system-supportDrop-in hoursContribute to the design systemGive feedbackRelease notes