App Header Menu

Menu items within the app header.

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.

Examples

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

Header with navigation

Related components