Header with navigation

React

Angular

Web Components

<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>

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