Manual header set-up

If the foundation-header component has not been implemented in your project, follow the steps below to add this micro front-end to your application.

1. Add @genesislcap/foundation-header as a dependency in your package.json file. Whenever you change the dependencies of your project, ensure you run the bootstrap command again. There is more information in the package.json basics page.

{
  ...
  "dependencies": {
    "@genesislcap/foundation-header": "latest"
  },
  ...
}

note

This page assumes you're already using the Login and Routing systems that are part of foundation-ui for the logout and routing functionality.

It is possible for you to set up routing manually, but that won't be covered in this tutorial.

2. In the top-level class of your application, import the Navigation class and inject it as a dependency.

React

For React applications, use the Framework integration - React guide. Register @genesislcap/foundation-header with your design system:

import { configure as configureHeader } from '@genesislcap/foundation-header/config';

configureHeader({
  // navigation items, logo, etc.
});

Genesis

import { GenesisElement, customElement, inject } from '@genesislcap/web-core';
import { Navigation } from '@genesislcap/foundation-header';

@customElement({ name, template, styles })
export class MainApplication extends GenesisElement {
  @inject(MainRouterConfig) config!: MainRouterConfig;
  @inject(Navigation) navigation!: Navigation;

  //...

}

Angular

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Navigation } from '@genesislcap/foundation-header';

@Component({
  selector: 'app-root',
  template: `
    <div class="container">
      <foundation-header show-luminance-toggle-button></foundation-header>
      <!-- router outlet -->
    </div>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [Navigation],
})
export class AppComponent {
  constructor(public navigation: Navigation) {}
}

Genesis projects

If you haven't used the inject annotation in your application yet, you'll need to get it from the @genesislcap/web-core package.

3. Set a reference to the navigation object on the foundation-router when you instantiate it. This enables you to set up navigation functionality from the navigation bar in the navigation items step.

React

Wire navigation through your React router and header configuration (see Framework integration - React).

Genesis

const MainTemplate: ViewTemplate<MainApplication> = html`
  <foundation-router :navigation=${(x) => x.navigation}></foundation-router>
`;

Angular

Pass the injected Navigation service into your Angular router setup and header configuration as required by your app.

4. Add the foundation-header tag as part of the html that you set as the markup for the defaultLayout in your router configuration.

React

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

export function AppLayout() {
  return (
    <div className="container">
      <FoundationHeader showLuminanceToggleButton />
      {/* Other markup */}
    </div>
  );
}

Genesis

export const defaultLayout = new GenesisElementLayout(html`
<div class="container">
  <!-- show-luminance-toggle-button boolean attribute added to show that button on the navigation bar -->
  <foundation-header show-luminance-toggle-button></foundation-header>
  <!-- Other markup -->
</div>`);

export class MainRouterConfig extends RouterConfiguration<LoginSettings> {
  //...

  public configure() {
    this.title = 'Example app';
    this.defaultLayout = defaultLayout;
    //...
  }
}

Angular

@Component({
  template: `
    <div class="container">
      <foundation-header show-luminance-toggle-button></foundation-header>
      <!-- Other markup -->
    </div>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppLayoutComponent {}