Header
Provide structure to help users find their way around the service.
Props
fullMenuBreakpoint
number
Sets the breakpoint in px for the full menu to display.
heading
string
Set the service name to display in the app header.
maxContentWidth
string
Maximum width of the content area.
secondaryText
string
V2 only: Secondary text displayed under the service name.
testId
string
Sets a data-testid attribute for automated testing.
url
string
Set the URL to link from the alberta.ca logo. A full url is required.
Events
onMenuClick
() => void
Callback fired when the menu button is clicked. When provided, clicking the menu button dispatches a custom event instead of toggling the menu.
ReactNode
banner
ReactNode
Named slot for content
navigation
ReactNode
Named slot for content
phase
ReactNode
Named slot for content
utilities
ReactNode
Named slot for content
App Header Menu Props
heading
string
The menu heading text displayed as the dropdown trigger.
leadingIcon
GoabIconType
Icon displayed before the heading text.
slotName
string
Slot name used to place this menu in the correct slot of the parent component.
testId
string
Sets a data-testid attribute for automated testing.
Basic page layout
<GoabOneColumnLayout>
<section slot="header">
<GoabAppHeader url="/" heading="Service name">
<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><goab-column-layout>
<section slot="header">
<goab-app-header url="/" heading="Service name">
<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">
<goab-app-footer></goab-app-footer>
</section>
</goab-column-layout><goa-one-column-layout>
<section slot="header">
<goa-app-header version="2" url="/" heading="Service name">
<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 navigation
<GoabAppHeader url="https://www.alberta.ca" heading="Service name">
<a slot="navigation" href="#">
Dashboard
</a>
<GoabAppHeaderMenu slotName="navigation" heading="Search">
<a href="#">Cases</a>
<a href="#">Payments</a>
<a href="#">Outstanding</a>
</GoabAppHeaderMenu>
<a slot="navigation" href="#">
Support
</a>
<div slot="utilities">
<GoabMenuButton text="John Smith" type="tertiary" size="compact">
<GoabMenuAction text="User settings" action="user-settings" />
<GoabMenuAction text="Sign out" action="sign-out" />
</GoabMenuButton>
</div>
</GoabAppHeader><goab-app-header url="https://example.com" heading="Service name">
<a slot="navigation" href="#">Dashboard</a>
<goab-app-header-menu slotName="navigation" heading="Search">
<a href="#">Cases</a>
<a href="#">Payments</a>
<a href="#">Outstanding</a>
</goab-app-header-menu>
<a slot="navigation" href="#">Support</a>
<goab-menu-button slot="utilities" text="John Smith" type="tertiary" size="compact">
<goab-menu-action text="User settings" action="user-settings"></goab-menu-action>
<goab-menu-action text="Sign out" action="sign-out"></goab-menu-action>
</goab-menu-button>
</goab-app-header><goa-app-header version="2" url="https://example.com" heading="Service name">
<a slot="navigation" href="#">Dashboard</a>
<goa-app-header-menu slot="navigation" heading="Search">
<a href="#">Cases</a>
<a href="#">Payments</a>
<a href="#">Outstanding</a>
</goa-app-header-menu>
<a slot="navigation" href="#">Support</a>
<goa-menu-button
slot="utilities"
version="2"
text="John Smith"
type="tertiary"
size="compact"
>
<goa-menu-action text="User settings" action="user-settings"></goa-menu-action>
<goa-menu-action text="Sign out" action="sign-out"></goa-menu-action>
</goa-menu-button>
</goa-app-header>Positioning
Tip
Use consistent maxContentWidth with your page layout so the header aligns with the content below it.
Content
Warning
Always provide a heading prop on AppHeader to identify your service. Without it, users won't know which service they're using.
