Foundation Header

foundation-header is a micro front-end consisting of a navigation bar and a flyout menu, with routing, account-logout capabilities, language switching, and an optional Feature Flags selector for URL feature.* toggles.

It supports nested navigation permissions and layout item active indicators for route nav items.

The navigation bar reflects the current route: the active top-level item (and nested child row, when applicable) receives selected styling based on pathname polling. To detect whether a nav item should appear active in custom templates, use hasActiveChild. You can change the highlight with the --foundation-header-selected-item-background design token: pick any colour you want, or remove the highlight by matching the normal button fill or using transparent where appropriate; see Selected route highlight colour in Customizing the header.

Adding a header component to the template

Here is an example of a simple navigation bar with two navigation items. This header does not show additional control buttons but displays the default ones, allowing for showing submenus, the logged-in user's name, and the connection status.

React

Declaration:

  <foundation-header></foundation-header>

Usage:

@customElement({
  name: 'header-example',
  template: html`
    <foundation-header
      :routeNavItems=${(x) => x.navItems}
    ></foundation-header>
  `,
})
export class HeaderExample extends GenesisElement {
  const navItems = [{
    title: "Home",
    icon: {
      name: "home",
      variant: "solid",
    },
    navId: "header",
    placementIndex: 0,
    routePath: "home",
    routeName: "home",
  },
  {
    title: "Grids",
    icon: {
        name: "table",
        variant: "solid",
      },
    navId: "header",
    placementIndex: 1,
    routePath: "grids",
    routeName: "grids",
  }];
}

Genesis

Declaration:

<FoundationHeader></FoundationHeader>

Usage:

import { FoundationHeader } from '@genesislcap/foundation-header/react';

export default function HeaderExample({}) {
  const navItems = [{
    title: "Home",
    icon: {
      name: "home",
      variant: "solid",
    },
    navId: "header",
    placementIndex: 0,
    routePath: "home",
    routeName: "home",
  },
  {
    title: "Grids",
    icon: {
        name: "table",
        variant: "solid",
      },
    navId: "header",
    placementIndex: 1,
    routePath: "grids",
    routeName: "grids",
  }];

  return (
    <FoundationHeader
      routeNavItems={navItems}
    ></FoundationHeader>
  );
}

Angular

Declaration:

  <foundation-header></foundation-header>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'header-example',
  template: `
    <foundation-header
      [routeNavItems]="navItems"
    ></foundation-header>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class HeaderExampleComponent {
  navItems = [{
    title: "Home",
    icon: {
      name: "home",
      variant: "solid",
    },
    navId: "header",
    placementIndex: 0,
    routePath: "home",
    routeName: "home",
  },
  {
    title: "Grids",
    icon: {
        name: "table",
        variant: "solid",
      },
    navId: "header",
    placementIndex: 1,
    routePath: "grids",
    routeName: "grids",
  }];
}

Attributes

Attribute	Type	Use	Example
logo-src	string	Optional attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.	<foundation-header logo-src="path/to/logo.png">
logo-alt-text	string	Optional attribute which controls the alt text of the logo. If this attribute is not set then the alt text is set to 'Corporate Logo'.	<foundation-header logo-alt-text="My Logo">
show-luminance-toggle-button	boolean	Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.	<foundation-header show-luminance-toggle-button>
show-misc-toggle-button	boolean	Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.	<foundation-header show-misc-toggle-button>
show-notification-button	boolean	Boolean attribute which controls whether the navigation bar will display the show notification icon.	<foundation-header show-notification-button>
show-connection-indicator	boolean	Boolean attribute which controls whether the navigation bar will display the connection indicator.	foundation-header show-connection-indicator>
show-environment-indicator	boolean	Boolean attribute which controls whether the navigation bar will display the environment indicator. See Environment Indicator for configuration details.	<foundation-header show-environment-indicator>
show-language-selector	boolean	Boolean attribute which controls whether the navigation bar will display the language selector.	<foundation-header show-language-selector>
hide-side-bar	boolean	Boolean attribute which controls whether the navigation bar will display the side bar.	<foundation-header hide-side-bar>
enable-inactivity-monitoring	boolean	Boolean attribute which controls whether client side inactivity monitoring is enabled. - Defaults to true	<foundation-header enable-inactivity-monitoring>
inactivity-timeout-minutes	string	Attribute which controls the duration of inactivity within the app before the inactivity warning dialog is shown to the user. Requires enable-inactivity-monitoring - Defaults to 30	<foundation-header inactivity-timeout-minutes="20">
inactivity-warning-minutes	string	Attribute which controls the duration that the warning dialog is shown to the user, before the user is logged out. Requires enable-inactivity-monitoring - Defaults to 5	<foundation-header inactivity-warning-minutes="2">

Properties

Property	Type	Use	Example
userName	string	Username of the logged in user.	<foundation-header :userName="${(x) => x.userName}>
languageOptions	LanguageOptions	Object which defines the language options to be displayed in the language selector.	<foundation-header :languageOptions="${(x) => x.languageOptions}>
featureFlagOptions	FeatureFlagOptions	Object which defines the feature flags offered in the header selector. Populate availableFlags to show the Feature Flags button; an empty list keeps it hidden. Selected flags sync to URL feature.* query params and reload the page. See Feature flags.	<foundation-header :featureFlagOptions="${(x) => x.featureFlagOptions}">
routeNavItems	FoundationRouteNavItem[]	Array of FoundationRouteNavItems which define the route buttons to be displayed in the navigation bar, including nested submenu items. Permission checks apply to nested items as well as top-level items.	<foundation-header :routeNavItems="${(x) => x.routeNavItems}">
layoutItemCheck	(registration: string) => boolean	(BETA) Callback used to determine if a layout nav item is currently active. Works with nav items that set isLayoutItem and layoutRegistration.	<foundation-header :layoutItemCheck="${(x) => (registration) => x.currentLayoutItems.includes(registration)}" >

Slots

Slot Name	Description
menu-contents	Slot for adding custom content to the flyout menu (side navigation).
routes	Slot for adding custom route buttons to the navigation bar.
routes-end	Slot for adding custom route buttons to the end of the navigation bar.

Parts

Part Name	Description
dynamic-template	The element representing the dynamic template content.
feature-flags-wrapper	Wrapper around the Feature Flags control. See Feature flags.
feature-flags-button	The Feature Flags button.
feature-flags-panel	The Feature Flags panel that hosts the multiselect.

Methods

Method Name	Description
logout	Logs the user out of their session.
navigateTo	Changes the route of the current page.

Fired Events

Event Name	Type	Description	Example
luminance-icon-clicked	void	Dispatched when the user clicks on the luminance toggle icon in the navigation bar.	<foundation-header @luminance-icon-clicked="${(x) => x.handleLuminanceIconClick}>
misc-icon-clicked	void	Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.	<foundation-header @misc-icon-clicked="${(x) => x.handleMiscIconClick}">
notification-icon-clicked	void	Dispatched when the user clicks on the notification icon in the navigation bar.	<foundation-header @notification-icon-clicked="${(x) => x.handleNotificationIconClick}">
language-changed	void	Dispatched when the user changes the language in the language selector.	<foundation-header @language-changed="${(x) => x.handleLanguageChange}">
feature-flags-changed	string[]	Dispatched when the user changes the selected feature flags. Detail is the array of selected flag names. The header then updates URL feature.* params and reloads.	<foundation-header @feature-flags-changed="${(x, c) => x.handleFeatureFlagsChange(c.event)}">
logout-clicked	void	Dispatched when the user clicks logout button.	<foundation-header @logout-clicked="${(x) => x.handleLagoutClicked}">

info

For a full list of attributes and properties, see API documents.