Back to all examples

Header with navigation

<GoabAppHeader url="https://www.alberta.ca" heading="Service name">
      <GoabAppHeaderMenu heading="Search" leadingIcon="search">
        <a href="#">Cases</a>
        <a href="#">Payments</a>
        <a href="#">Outstanding</a>
      </GoabAppHeaderMenu>
      <a href="#">Support</a>
      <a href="#" className="interactive">
        Sign in
      </a>
    </GoabAppHeader>
<goab-microsite-header type="live"></goab-microsite-header>
<goab-app-header url="https://example.com" heading="Service name">
  <goab-app-header-menu heading="Search" leadingIcon="search">
    <a href="#">Cases</a>
    <a href="#">Payments</a>
    <a href="#">Outstanding</a>
  </goab-app-header-menu>
  <a href="#">Support</a>
  <a href="#" class="interactive">Sign in</a>
</goab-app-header>
<goa-microsite-header type="live"></goa-microsite-header>
<goa-app-header url="https://example.com" heading="Service name">
  <goa-app-header-menu heading="Search" leadingicon="search">
    <a href="#">Cases</a>
    <a href="#">Payments</a>
    <a href="#">Outstanding</a>
  </goa-app-header-menu>
  <a href="#">Support</a>
  <a href="#" class="interactive">Sign in</a>
</goa-app-header>

Implement a standard application header with navigation menus, search functionality, and sign-in links for government services.

When to use

Use this pattern when:

  • Building a government service application
  • You need consistent navigation across pages
  • Users need access to search, support, and authentication
  • Following the GoA header pattern

Considerations

  • Use the microsite header above the app header for government branding
  • Group related navigation items under dropdown menus
  • Include a sign-in link with the “interactive” class for proper styling
  • Consider mobile responsiveness for navigation items