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

App Header Menu Props

heading
string
The menu heading text displayed as the dropdown trigger.
leadingIcon
GoAIconType
Icon displayed before the heading text.
type
primary | secondary
The menu style variant. Primary uses bold text, secondary uses regular weight.
Defaults to primary.
version
1 | 2
The header version this menu is used with.
Defaults to 1.
testId
string
Sets a data-testid attribute for automated testing.
Defaults to rootEl.
Examples

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-one-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-one-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>
        <GoabMenuButton
          slot="utilities"
          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">
  <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>

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