Header
Provide structure to help users find their way around the service.
Props
heading
string
Set the service name to display in the app header.
url
string
Set the URL to link from the alberta.ca logo. A full url is required.
testId
string
Sets a data-testid attribute for automated testing.
maxcontentwidth
any
Maximum width of the content area.
fullmenubreakpoint
number
Sets the breakpoint in px for the full menu to display.
Defaults to
TABLET_BP.
hasmenuclickhandler
boolean
When true, clicking the menu button dispatches _menuClick event instead of toggling the menu. Use for custom menu handling.
Defaults to
false.
Events
onMenuClick
(event: Event) => void
_menuClick
CustomEvent
Basic page layout
<GoabOneColumnLayout>
<section slot="header">
<GoabMicrositeHeader type="alpha" version="UAT" />
<GoabAppHeader url="/" heading="Design System">
<a href="/login">Sign in</a>
</GoabAppHeader>
</section>
<GoabPageBlock width="704px">
<p>
<GoabSkeleton type="header" size="4" />
<GoabSkeleton type="text" size="1" />
</p>
<p>
<GoabSkeleton type="header" size="4" />
<GoabSkeleton type="text" size="1" />
</p>
<GoabGrid minChildWidth="30ch">
<GoabSkeleton type="card" size="2" />
<GoabSkeleton type="card" size="2" />
</GoabGrid>
</GoabPageBlock>
<section slot="footer">
<GoabAppFooter />
</section>
</GoabOneColumnLayout>Header with menu click event
const [deviceWidth, setDeviceWidth] = useState("5000");
function handleMenuClick() {
alert("Menu not being displayed and you can do anything");
}<GoabRadioGroup
name="device"
value={deviceWidth}
onChange={(event: GoabRadioGroupOnChangeDetail) =>
setDeviceWidth(event.value)
}
>
<GoabRadioItem value="600" label="Desktop" />
<GoabRadioItem value="5000" label="Mobile" />
</GoabRadioGroup>
<GoabAppHeader
url="https://example.com"
heading="Design System"
onMenuClick={handleMenuClick}
fullMenuBreakpoint={+deviceWidth}
>
<GoabAppHeaderMenu heading="Search" leadingIcon="search">
<a href="#">Cases</a>
<a href="#">Payments</a>
<a href="#">Outstanding</a>
</GoabAppHeaderMenu>
<a href="#">Support</a>
<a href="#" className="interactive">
Sign in
</a>
</GoabAppHeader>Header with navigation
<GoabAppHeader url="https://www.alberta.ca" heading="Service name">
<GoabAppHeaderMenu heading="Search" leadingIcon="search">
<a href="#">Cases</a>
<a href="#">Payments</a>
<a href="#">Outstanding</a>
</GoabAppHeaderMenu>
<a href="#">Support</a>
<a href="#" className="interactive">
Sign in
</a>
</GoabAppHeader>