App Header Menu

Menu items within the app header.

Props

heading

string

The menu heading text displayed as the dropdown trigger.

leadingIcon

GoAIconType

Icon displayed before the heading text.

type

primary | secondary

The menu style variant. Primary uses bold text, secondary uses regular weight.

Defaults to primary.

testId

string

Sets a data-testid attribute for automated testing.

Defaults to rootEl.

Examples

Header with menu click event

const [deviceWidth, setDeviceWidth] = useState("5000");

  function handleMenuClick() {
    alert("Menu not being displayed and you can do anything");
  }

<GoabxRadioGroup
        name="device"
        value={deviceWidth}
        onChange={(event: GoabRadioGroupOnChangeDetail) =>
          setDeviceWidth(event.value)
        }
      >
        <GoabxRadioItem value="600" label="Desktop" />
        <GoabxRadioItem value="5000" label="Mobile" />
      </GoabxRadioGroup>

      <GoabAppHeader
        url="https://example.com"
        heading="Design System"
        onMenuClick={handleMenuClick}
        fullMenuBreakpoint={+deviceWidth}
      >
        <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>

deviceWidth = "5000";

  changeDeviceWidth(event: GoabRadioGroupOnChangeDetail): void {
    this.deviceWidth = event.value;
  }

  handleMenuClick(): void {
    alert("Menu not being displayed and you can do anything");
  }

<goabx-radio-group
  name="device"
  [value]="deviceWidth"
  (onChange)="changeDeviceWidth($event)">
  <goabx-radio-item value="600" label="Desktop"></goabx-radio-item>
  <goabx-radio-item value="5000" label="Mobile"></goabx-radio-item>
</goabx-radio-group>

<goab-app-header
  url="https://example.com"
  heading="Design System"
  [fullMenuBreakpoint]="+deviceWidth"
  (onMenuClick)="handleMenuClick()">
  <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>

const radioGroup = document.getElementById("device-radio-group");
const appHeader = document.getElementById("app-header");

radioGroup.addEventListener("_change", (e) => {
  appHeader.setAttribute("full-menu-breakpoint", e.detail.value);
});

appHeader.addEventListener("_menuClick", () => {
  alert("Menu not being displayed and you can do anything");
});

<goa-radio-group version="2" name="device" value="5000" id="device-radio-group">
  <goa-radio-item value="600" label="Desktop"></goa-radio-item>
  <goa-radio-item value="5000" label="Mobile"></goa-radio-item>
</goa-radio-group>

<goa-app-header
  id="app-header"
  url="https://example.com"
  heading="Design System"
  fullmenubreakpoint="5000">
  <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>

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>

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.