foundation-header.navigation

Home > @genesislcap/foundation-header > Navigation

Navigation class

Navigation micro-frontend includes navigation bar and flyout menu

Signature:

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
authRouting		AuthRouting
container		Container
enableInactivityMonitoring		boolean	Boolean attribute which controls whether to enable inactivity monitoring Control via enable-inactivity-monitoring
headerConfig		HeaderConfig
hideSideBar		boolean	Boolean attribute which controls whether to include the sideNav component Control viahide-side-bar
i18next		I18next
inactivityTimeoutMinutes		number	Number attribute which sets the inactivity timeout in minutes Control via inactivity-timeout-minutes
inactivityWarningMinutes		number	Number attribute which sets the inactivity warning time in minutes before timeout Control via inactivity-warning-minutes
languageOptions		LanguageOptions	Object which defines the language options to be displayed in the language selector
loginRouting		LoginRouting
logoAltText		string	Optional attribute which controls the alt text of the logo Control via logo-alt-text
logoSrc		any	Optional attribute which controls the icon to show on the navigation bar and flyout Control via logo-src
logoutButtonPosition		'side-nav' | 'account-menu' | 'none'	String attribute which controls the position of the logout button in the header Control via logout-button-position
luminanceToggle		boolean
routeButtons		Array<{ index: number; path: string; title: string; icon: string; variant: string; }>	If present the defined route buttons will be rendered in the header 'routes' slot
routeNavItems		FoundationRouteNavItem[]	If present the defined will be rendered in the header 'routes' slot
shouldShowAccountMenu	readonly	boolean	Computed property that determines if the account menu should be shown
showAccountMenu		boolean	Boolean attribute which controls whether to show the account menu on the navigation bar Control via show-account-menu
showConnectionIndicator		boolean	Boolean attribute which controls whether to show the connection indicator on the navigation bar Control via show-connection-indicator
showEnvironmentIndicator		boolean	Boolean attribute which controls whether to show the environment indicator on the navigation bar Control via show-environment-indicator
showLanguageSelector		boolean	Boolean attribute which controls whether to show the language selector on the navigation bar Control via show-language-selector
showLuminanceToggleButton		boolean	Boolean attribute which controls whether to show the luminance (moon) icon on the navigation bar Control viashow-luminance-toggle-button
showMiscToggleButton		boolean	Boolean attribute which controls whether to show the miscellaneous (menu) icon on the navigation bar Control via show-luminance-toggle-button
showNotificationsButton		boolean	Boolean attribute which controls whether to show the notification (bell) icon on the navigation bar Control via show-notification-button
user		User
userName		string	Username of the logged in user

Methods

Method	Modifiers	Description
changeLanguage(e)		Changes the language of the application
connectedCallback()		Called when the component is connected to the DOM
disconnectedCallback()		Called when the component is disconnected from the DOM
handleNavButtonClick(routeNavItem)		Handles the click event for a navigation button
hasActiveChild(navItem)		Check if any child nav item matches the current route
logout()		Logs the user out of their session
navigateTo(path)		Changes the route of the current page
selectTemplate()		Selects the appropriate template based on the component's state
setLuminance()
toLocalisedText(text)		To localised text