Header
Provide structure to help users find their way around the service.
Props
version
1 | 2
Defaults to
1.
heading
string
Set the service name to display in the app header.
secondarytext
string
V2 only: Secondary text displayed under the service name.
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
Slots
banner
Named slot for content
phase
Named slot for content
utilities
Named slot for content
navigation
Named slot for content
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">
<GoabxAppFooter />
</section>
</GoabOneColumnLayout><goab-one-column-layout>
<section slot="header">
<goab-microsite-header type="alpha" version="UAT"></goab-microsite-header>
<goab-app-header url="/" heading="Design System">
<a href="/login">Sign in</a>
</goab-app-header>
</section>
<goab-page-block width="704px">
<p>
<goab-skeleton type="header" size="4"></goab-skeleton>
<goab-skeleton type="text" size="1"></goab-skeleton>
</p>
<p>
<goab-skeleton type="header" size="4"></goab-skeleton>
<goab-skeleton type="text" size="1"></goab-skeleton>
</p>
<goab-grid minChildWidth="30ch">
<goab-skeleton type="card" size="2"></goab-skeleton>
<goab-skeleton type="card" size="2"></goab-skeleton>
</goab-grid>
</goab-page-block>
<section slot="footer">
<goabx-app-footer></goabx-app-footer>
</section>
</goab-one-column-layout><goa-one-column-layout>
<section slot="header">
<goa-microsite-header type="alpha" version="UAT"></goa-microsite-header>
<goa-app-header url="/" heading="Design System">
<a href="/login">Sign in</a>
</goa-app-header>
</section>
<goa-page-block width="704px">
<p>
<goa-skeleton type="header" size="4"></goa-skeleton>
<goa-skeleton type="text" size="1"></goa-skeleton>
</p>
<p>
<goa-skeleton type="header" size="4"></goa-skeleton>
<goa-skeleton type="text" size="1"></goa-skeleton>
</p>
<goa-grid min-child-width="30ch">
<goa-skeleton type="card" size="2"></goa-skeleton>
<goa-skeleton type="card" size="2"></goa-skeleton>
</goa-grid>
</goa-page-block>
<section slot="footer">
<goa-app-footer version="2"></goa-app-footer>
</section>
</goa-one-column-layout>Header with menu click event
const [deviceWidth, setDeviceWidth] = useState("5000");
function handleMenuClick() {
alert("Menu not being displayed and you can do anything");
}<GoabxRadioGroup
name="device"
value={deviceWidth}
onChange={(event: GoabRadioGroupOnChangeDetail) =>
setDeviceWidth(event.value)
}
>
<GoabxRadioItem value="600" label="Desktop" />
<GoabxRadioItem value="5000" label="Mobile" />
</GoabxRadioGroup>
<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>deviceWidth = "5000";
changeDeviceWidth(event: GoabRadioGroupOnChangeDetail): void {
this.deviceWidth = event.value;
}
handleMenuClick(): void {
alert("Menu not being displayed and you can do anything");
}<goabx-radio-group
name="device"
[value]="deviceWidth"
(onChange)="changeDeviceWidth($event)">
<goabx-radio-item value="600" label="Desktop"></goabx-radio-item>
<goabx-radio-item value="5000" label="Mobile"></goabx-radio-item>
</goabx-radio-group>
<goab-app-header
url="https://example.com"
heading="Design System"
[fullMenuBreakpoint]="+deviceWidth"
(onMenuClick)="handleMenuClick()">
<goab-app-header-menu heading="Search" leadingIcon="search">
<a href="#">Cases</a>
<a href="#">Payments</a>
<a href="#">Outstanding</a>
</goab-app-header-menu>
<a href="#">Support</a>
<a href="#" class="interactive">Sign in</a>
</goab-app-header>const radioGroup = document.getElementById("device-radio-group");
const appHeader = document.getElementById("app-header");
radioGroup.addEventListener("_change", (e) => {
appHeader.setAttribute("full-menu-breakpoint", e.detail.value);
});
appHeader.addEventListener("_menuClick", () => {
alert("Menu not being displayed and you can do anything");
});<goa-radio-group version="2" name="device" value="5000" id="device-radio-group">
<goa-radio-item value="600" label="Desktop"></goa-radio-item>
<goa-radio-item value="5000" label="Mobile"></goa-radio-item>
</goa-radio-group>
<goa-app-header
id="app-header"
url="https://example.com"
heading="Design System"
fullmenubreakpoint="5000">
<goa-app-header-menu heading="Search" leadingicon="search">
<a href="#">Cases</a>
<a href="#">Payments</a>
<a href="#">Outstanding</a>
</goa-app-header-menu>
<a href="#">Support</a>
<a href="#" class="interactive">Sign in</a>
</goa-app-header>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><goab-microsite-header type="live"></goab-microsite-header>
<goab-app-header url="https://example.com" heading="Service name">
<goab-app-header-menu heading="Search" leadingIcon="search">
<a href="#">Cases</a>
<a href="#">Payments</a>
<a href="#">Outstanding</a>
</goab-app-header-menu>
<a href="#">Support</a>
<a href="#" class="interactive">Sign in</a>
</goab-app-header><goa-microsite-header type="live"></goa-microsite-header>
<goa-app-header url="https://example.com" heading="Service name">
<goa-app-header-menu heading="Search" leadingicon="search">
<a href="#">Cases</a>
<a href="#">Payments</a>
<a href="#">Outstanding</a>
</goa-app-header-menu>
<a href="#">Support</a>
<a href="#" class="interactive">Sign in</a>
</goa-app-header>