Side menu

A side navigation that helps the user navigate between pages.

Props

testId
string
Sets a data-testid attribute for automated testing.
testId
string
Sets a data-testid attribute for automated testing.
testid
string
Sets a data-testid attribute for automated testing.
version
"1" | "2"
Design system version for styling.
Defaults to 1.

Side Menu Group Props

heading
string
The heading text for the menu group.
icon
GoabIconType
Icon displayed alongside the heading.
testId
string
Sets a data-testid attribute for automated testing.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
heading
string
The heading text for the menu group.
icon
GoabIconType
Icon displayed alongside the heading.
testId
string
Sets the data-testid attribute for automated testing.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
heading
string
The heading text for the menu group.
icon
GoabIconType
Icon displayed alongside the heading.
testid
string
Sets a data-testid attribute for automated testing.
version
"1" | "2"
Design system version for styling.
Defaults to 1.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.

Side Menu Heading Props

icon
GoabIconType
Icon displayed before the heading text.
testId
string
Sets a data-testid attribute for automated testing.
icon
GoabIconType
Icon displayed before the heading text.
testId
string
Sets a data-testid attribute for automated testing.
icon
GoabIconType
Icon displayed before the heading text.
testid
string
Sets a data-testid attribute for automated testing.
Defaults to section-heading.
version
"1" | "2"
Design system version for styling.
Defaults to 1.

Side Menu Heading ReactNode

meta
ReactNode
Content rendered in the meta slot, displayed alongside the heading.
meta
TemplateRef
Content rendered in the meta slot, displayed alongside the heading.
meta
slot
Content rendered in the meta slot, displayed alongside the heading.
Examples
Examples show common usage patterns and implementation guidance.

No usage guidelines have been documented for this component yet.

All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.

View old component docs