Back to all examples

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>

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.