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.

Slots

banner

Named slot for content

navigation

Named slot for content

phase

Named slot for content

utilities

Named slot for content

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.

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

Props

Events

Slots

App Header Menu Props

Basic page layout

Header with navigation

Related components