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
controlPanel		ControlPanel
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
layoutItemCheck?		(registration: string) => boolean	(BETA) (Optional) Callback function to check if a layout item is currently active in the layout. Used with nav items that have isLayoutItem: true and layoutRegistration set.
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
onBeforeNavButtonClick?		(detail: NavButtonClickDetail) => void | Promise<void>	(Optional) Callback invoked before navigation occurs when a nav button is clicked. Awaited before the route changes, so async cleanup is supported.
pathName	readonly	string	Current pathname for route highlighting
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
showAiIndicator		boolean	Boolean attribute which controls whether to show the AI indicator on the navigation bar Control via show-ai-indicator
showConnectionIndicator		boolean	Boolean attribute which controls whether to show the connection indicator on the navigation bar Control via show-connection-indicator
showControlPanel		boolean	Boolean attribute which controls whether to show the control panel toggle on the navigation bar Control via show-control-panel
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 Control via user-name attribute

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
isLayoutItemActive(item)		Check if a layout item is currently active in the layout
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