<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [Navigation](./foundation-header.navigation.md)

## Navigation class

Navigation micro-frontend includes navigation bar and flyout menu

**Signature:**

```typescript
export declare class Navigation extends Navigation_base 
```
**Extends:** Navigation\_base

## Remarks

`foundation-header` micro-frontend can be added to the project to include a navigation bar and flyout menu. There are multiple ways that the behaviour of the component can be configured - the icon shown on the navigation bar and flyout menu (this shows the Genesis logo by default). - navigation links at the left-hand side of the navigation bar. - the control buttons on the right-hand side of the navigation bar can be shown or hidden, and their behaviour controlled via event listeners - The contents of the flyout menu.

## Properties

|  Property | Modifiers | Type | Description |
|  --- | --- | --- | --- |
|  [auth](./foundation-header.navigation.auth.md) |  | Auth |  |
|  [credentialManager](./foundation-header.navigation.credentialmanager.md) |  | CredentialManager |  |
|  [hideSideBar](./foundation-header.navigation.hidesidebar.md) |  | boolean | Boolean attribute which controls whether to include the sideNav component Control via<code>hide-side-bar</code> |
|  [logoSrc](./foundation-header.navigation.logosrc.md) |  | any | Optional attribute which controls the icon to show on the navigation bar and flyout Control via <code>logo-src</code> |
|  [provider](./foundation-header.navigation.provider.md) |  | any |  |
|  [ready](./foundation-header.navigation.ready.md) |  | boolean |  |
|  [routeButtons](./foundation-header.navigation.routebuttons.md) |  | Array&lt;{ index: number; path: string; title: string; icon: string; variant: string; }&gt; | If present the defined route buttons will be rendered in the header 'routes' slot |
|  [showLuminanceToggleButton](./foundation-header.navigation.showluminancetogglebutton.md) |  | boolean | Boolean attribute which controls whether to show the luminance (moon) icon on the navigation bar Control via<code>show-luminance-toggle-button</code> |
|  [showMiscToggleButton](./foundation-header.navigation.showmisctogglebutton.md) |  | boolean | Boolean attribute which controls whether to show the miscellaneous (menu) icon on the navigation bar Control via <code>show-luminance-toggle-button</code> |
|  [showNotificationsButton](./foundation-header.navigation.shownotificationsbutton.md) |  | boolean | Boolean attribute which controls whether to show the notification (bell) icon on the navigation bar Control via <code>show-notification-button</code> |
|  [sideNavOpen](./foundation-header.navigation.sidenavopen.md) |  | boolean |  |
|  [userName](./foundation-header.navigation.username.md) |  | string | Username of the logged in user |

## Methods

|  Method | Modifiers | Description |
|  --- | --- | --- |
|  [connectedCallback()](./foundation-header.navigation.connectedcallback.md) |  |  |
|  [logout()](./foundation-header.navigation.logout.md) |  | Logs the user out of their session |
|  [navigateTo(path)](./foundation-header.navigation.navigateto.md) |  | Changes the route of the current page |
|  [selectTemplate()](./foundation-header.navigation.selecttemplate.md) |  |  |

