Header with navigation
<GoabAppHeader
url="https://www.alberta.ca"
heading="Service name"
navigation={
<a href="#">Dashboard</a>
<GoabAppHeaderMenu heading="Search">
<a href="#">Cases</a>
<a href="#">Payments</a>
<a href="#">Outstanding</a>
</GoabAppHeaderMenu>
<a href="#">Support</a>
}
utilities={
<GoabMenuButton text="John Smith" type="tertiary" size="compact">
<GoabMenuAction text="User settings" action="user-settings" />
<GoabMenuAction text="Sign out" action="sign-out" />
</GoabMenuButton>
}
></GoabAppHeader><goab-app-header
url="https://example.com"
heading="Service name"
[navigation]="navigationTemplate"
[utilities]="utilitiesTemplate"
>
</goab-app-header>
<ng-template #navigationTemplate>
<a href="#">Dashboard</a>
<goab-app-header-menu heading="Search">
<a href="#">Cases</a>
<a href="#">Payments</a>
<a href="#">Outstanding</a>
</goab-app-header-menu>
<a href="#">Support</a>
</ng-template>
<ng-template #utilitiesTemplate>
<goab-menu-button 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>
</ng-template><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>An application header with navigation links, grouped menu items, and a user account menu.
How it works
The header has two main slots for content:
- Navigation — links and app header menus appear in the navigation bar below the header. Use plain links for single items and app header menu for grouped items with a dropdown.
- Utilities — actions like user account menus appear on the right side of the header. Use menu button for dropdowns with actions.
Navigation items automatically collapse into a “More” menu when the screen gets narrow.
When to use
Use this pattern when your service needs persistent navigation across pages. See the basic page layout example for a simpler header without navigation.