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

Examples

Basic page layout

<GoabOneColumnLayout>
      <section slot="header">
        <GoabxAppHeader url="/" heading="Service name">
          <a href="/login">Sign in</a>
        </GoabxAppHeader>
      </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">
    <goabx-app-header url="/" heading="Service name">
      <a href="/login">Sign in</a>
    </goabx-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-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

<GoabxAppHeader url="https://www.alberta.ca" heading="Service name">
        <a slot="navigation" href="#">
          Dashboard
        </a>
        <GoabxAppHeaderMenu slotName="navigation" heading="Search">
          <a href="#">Cases</a>
          <a href="#">Payments</a>
          <a href="#">Outstanding</a>
        </GoabxAppHeaderMenu>
        <a slot="navigation" href="#">
          Support
        </a>
        <GoabxMenuButton
          slot="utilities"
          text="John Smith"
          type="tertiary"
          size="compact"
        >
          <GoabxMenuAction text="User settings" action="user-settings" />
          <GoabxMenuAction text="Sign out" action="sign-out" />
        </GoabxMenuButton>
      </GoabxAppHeader>

<goabx-app-header url="https://example.com" heading="Service name">
  <a slot="navigation" href="#">Dashboard</a>
  <goabx-app-header-menu slotName="navigation" heading="Search">
    <a href="#">Cases</a>
    <a href="#">Payments</a>
    <a href="#">Outstanding</a>
  </goabx-app-header-menu>
  <a slot="navigation" href="#">Support</a>
  <goabx-menu-button slot="utilities" text="John Smith" type="tertiary" size="compact">
    <goabx-menu-action text="User settings" action="user-settings"></goabx-menu-action>
    <goabx-menu-action text="Sign out" action="sign-out"></goabx-menu-action>
  </goabx-menu-button>
</goabx-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.