Documentation
Fuse Components
Components

## Navigation

fuse-navigation is a set of components for creating navigations from data. It has two different variations; fuse-vertical-navigation for creating vertical and fuse-horizontal-navigation for creating horizontal navigations.

The vertical navigation comes with built-in drawer that can be programmed in various ways to show the navigation in different styles and to control the mobile behavior.

fuse-navigation also provides a service which can be used to store navigation data as well as accessing navigation items with their ids from the navigation data. It's a utility service, you don't have to use it to make fuse-navigation work.

Exported as: `fuseVerticalNavigation` and `fuseHorizontalNavigation`

fuse-navigation designed to work with data and it must be supplied in certain format. If you want to create a navigation from an HTML structure, this component is not for you.

## Module

import { FuseVerticalNavigationModule } from '@fuse/components/navigation'; import { FuseHorizontalNavigationModule } from '@fuse/components/navigation';

## Navigation item

This is the interface of the Navigation item. Both vertical and horizontal navigation items use the same interface:

export interface FuseNavigationItem { id?: string; title?: string; subtitle?: string; type: | 'aside' | 'basic' | 'collapsable' | 'divider' | 'group' | 'spacer'; hidden?: (item: FuseNavigationItem) => boolean; active?: boolean; disabled?: boolean; tooltip?: string; link?: string; fragment?: string; preserveFragment?: boolean; queryParams?: Params | null; queryParamsHandling?: QueryParamsHandling | null; externalLink?: boolean; target?: | '_blank' | '_self' | '_parent' | '_top' | string; exactMatch?: boolean; isActiveMatchOptions?: IsActiveMatchOptions; function?: (item: FuseNavigationItem) => void; classes?: { title?: string; subtitle?: string; icon?: string; wrapper?: string; }; icon?: string; badge?: { title?: string; classes?: string; }; children?: FuseNavigationItem[]; meta?: any; }

Name | Description
--- | ---
id | Unique id of the navigation item. It's important to supply navigation items with ids if you want to access and modify them after generating the navigation.
title | Title of the navigation item.
subtitle | Subtitle of the navigation item.
type | Type of the navigation item.
hidden | A function that returns a boolean. It gets one parameter which is the navigation item. Returning `true` from the function will hide the item and `false` will show it.
active | Whether to force the navigation item to be active.
disabled | Whether the navigation item is disabled.
tooltip | Tooltip to show on item hover. Empty string will remove the tooltip.
link | String representation of the item link. It can be either a router link or a normal, outgoing link.
fragment | Sets the hash fragment for the URL.
preserveFragment | When true, preserves the URL fragment for the next navigation.
queryParams | Sets query parameters to the URL.
queryParamsHandling | How to handle query parameters in the router link for the next navigation.
externalLink | Whether the supplied link should be parsed as an external link. It must be true if you supply a normal, outgoing link in the link property.
target | Sets the target attribute of the external, outgoing link.
exactMatch | Sets the exact parameter on the [routerLinkActiveOptions].
isActiveMatchOptions | Sets the isActiveMatchOptions object on the [routerLinkActiveOptions]. If provided, exactMatch option will be ignored. https://angular.io/api/router/IsActiveMatchOptions
function | A function to run on navigation item click. It gets one parameter which is the navigation item. Supplying function will NOT override the link functionality of the navigation item, they will run in parallel.
classes | Custom class names for the navigation item's specific parts. Multiple class names can be added by separating them with whitespace: `'class1 class2 class3'`
icon | Icon name for the navigation item.
badge.title | Title of the badge.
badge.classes | Classes to add to the badge. This can be used to customize the look of the badge.
children | Array of navigation items to create child items.
meta | An object to hold custom data for the navigation item. It can be used for anything such as storing the access role and authorization of the navigation item.

## Vertical navigation

### Usage

Here's the basic usage of the `fuse-vertical-navigation`:

<fuse-vertical-navigation [appearance]="'classic'" [autoCollapse]="true" [inner]="false" [mode]="isScreenSmall ? 'over' : 'side'" [name]="'leftNavigation'" [navigation]="navigationData" [opened]="!isScreenSmall" [position]="'left'" [transparentOverlay]="false"> </fuse-vertical-navigation>

### Properties

Name | Description | Default
--- | --- | ---
@Input() appearance: FuseVerticalNavigationAppearance | Appearance of the navigation and its drawer. This is a string type and can be used to override the style of the navigation. | `classic`
@Input() autoCollapse: boolean | Whether expanding an expandable navigation item should close other expanded items excluding the active menu item's parent. | `true`
@Input() inner: boolean | Whether the inner mode is active. This mode allows using navigation without its drawer. Suitable for using it inside mat-sidenav or mat-drawer. | `false`
@Input() mode: FuseVerticalNavigationMode | over mode can be used to place the drawer on top of the content and side mode can be used to push the content and place the drawer next to it. | `side`
`REQUIRED` @Input() name: string | Unique name of the navigation. Required for navigation and its drawer to work correctly. | -
@Input() navigation: FuseNavigationItem[] | Array of navigation items to build the navigation from. | -
@Input() opened: boolean | Whether the navigation drawer is opened. Only works with over mode. | `false`
@Input() position: FuseVerticalNavigationPosition | Position of the drawer. | `left`
@Input() transparentOverlay: boolean | Whether the overlay of the drawer is transparent. Only works with over mode. | `false`
@Output() appearanceChanged: FuseVerticalNavigationAppearance | An event emitted after the appearance of the navigation changed. | -
@Output() modeChanged: FuseVerticalNavigationMode | An event emitted after the mode of the navigation changed. | -
@Output() openedChanged: boolean | An event emitted after the opened status of the navigation changed. | -
@Output() positionChanged: FuseVerticalNavigationPosition | An event emitted after the position of the navigation changed. | -

### Custom content hooks

Since the entire navigation will be created from the supplied navigation data, it's only possible to attach custom content inside the navigation drawer using custom content hooks. There are four of these hooks;

Hook | Description
--- | ---
fuseVerticalNavigationHeader | Fixed header hook. Anything put inside this hook will not scroll with drawer content.
fuseVerticalNavigationContentHeader | Header hook. Anything put inside this hook will be scrolled with the drawer content.
fuseVerticalNavigationFooter | Fixed footer hook. Anything put inside this hook will not scroll with drawer content.
fuseVerticalNavigationContentFooter | Footer hook. Anything put inside this hook will be scrolled with the drawer content.

<!-- Navigation --> <fuse-vertical-navigation> <div fuseVerticalNavigationHeader> At the top, fixed into position. </div> <div fuseVerticalNavigationContentHeader> At the top, scrolls with the content. </div> <div fuseVerticalNavigationContentFooter> At the bottom, scrolls with the content. </div> <div fuseVerticalNavigationFooter> At the bottom, fixed into position. </div> </fuse-vertical-navigation>

### Type aliases

export type FuseVerticalNavigationAppearance = | 'default' | 'compact' | 'dense' | 'futuristic' | 'thin' | string; export type FuseVerticalNavigationMode = | 'over' | 'side'; export type FuseVerticalNavigationPosition = | 'left' | 'right';

## Horizontal navigation

### Usage

Here's the basic usage of the `fuse-horizontal-navigation`:

<fuse-horizontal-navigation [name]="'topNavigation'" [navigation]="navigationData"> </fuse-horizontal-navigation>

### Properties

Name | Description | Default
--- | --- | ---
`REQUIRED` @Input() name: string | Unique name of the navigation. Required for navigation and its drawer to work correctly. | -
@Input() navigation: FuseNavigationItem[] | Array of navigation items to build the navigation from. | -

## Accessing navigation items

The `FuseNavigationService` provides couple helper methods to access navigation items from the navigation data using their ids. This is especially useful if you want to change something from any item like updating its badge title, hiding or disabling it.

###### Example

<button mat-flat-button [color]="'primary'" (click)="getNavItem('documentation.changelog', 'mainNavigation');"> Get the Changelog item (See browser console) </button> /** * Get navigation item * * @param itemId * @param navigationName */ getNavItem(itemId, navigationName): FuseNavigationItem | null { // Get the component -> navigation data -> item const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(navigationName); // Return if the navigation component does not exist if ( !navComponent ) { return null; } // Get the navigation item const navigation = navComponent.navigation; const item = this._fuseNavigationService.getItem(itemId, navigation); console.log(item); return item; }

## Modifying navigation items

After accessing a navigation item, you can simply modify the object and then call the `refresh()` method on the Navigation component to apply the changes.

###### Change badge title

<button mat-flat-button [color]="'primary'" (click)="updateBadgeTitle('documentation.changelog', 'mainNavigation', '9.9.99');"> Update the 'Changelog' badge title </button> /** * Update badge title * * @param itemId * @param navigationName * @param title */ updateBadgeTitle(itemId, navigationName, title): void { // Get the component -> navigation data -> item const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(navigationName); // Return if the navigation component does not exist if ( !navComponent ) { return null; } // Get the navigation item, update the badge and refresh the component const navigation = navComponent.navigation; const item = this._fuseNavigationService.getItem(itemId, navigation); item.badge.title = title; navComponent.refresh(); }

###### Disable/Enable navigation item

<button mat-flat-button [color]="'primary'" (click)="toggleDisabled('documentation.changelog', 'mainNavigation');"> Toggle the disabled status of 'Changelog' item </button> /** * Toggle disabled status * * @param itemId * @param navigationName */ toggleDisabled(itemId, navigationName): void { // Get the component -> navigation data -> item const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(navigationName); // Return if the navigation component does not exist if ( !navComponent ) { return null; } // Get the navigation item, update the badge and refresh the component const navigation = navComponent.navigation; const item = this._fuseNavigationService.getItem(itemId, navigation); item.disabled = !item.disabled; navComponent.refresh(); }

## Swapping entire navigation

Sometimes it's best to use more than one set of data and swap between them to provide correct navigation. An example use case would be user roles. Different roles may require access to different areas and rather than showing/hiding individual navigation items, it's best to swap the entire navigation data to show a personalized navigation for that role.

###### Swap the entire navigation data

Reload the page to load the default navigation!
<button mat-flat-button [color]="'primary'" (click)="swapNavigationData('mainNavigation');"> Swap the entire navigation data </button> /** * Swap navigation data * * @param navigationName */ swapNavigationData(navigationName): void { // Get the component -> navigation data -> item const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(navigationName); // Return if the navigation component does not exist if ( !navComponent ) { return null; } // A navigation data to replace with const newNavigation: FuseNavigationItem[] = [ { id : 'supported-components', title : 'Supported components', subtitle: 'Compatible third party components', type : 'group', icon : 'memory', children: [ { id : 'supported-components.apex-charts', title: 'ApexCharts', type : 'basic', icon : 'insert_chart', link : '/supported-components/apex-charts' }, { id : 'supported-components.full-calendar', title: 'FullCalendar', type : 'basic', icon : 'today', link : '/supported-components/full-calendar' }, { id : 'supported-components.google-maps', title: 'Google Maps', type : 'basic', icon : 'map', link : '/supported-components/google-maps' }, { id : 'supported-components.quill-editor', title: 'Quill editor', type : 'basic', icon : 'font_download', link : '/supported-components/quill-editor' }, { id : 'supported-components.youtube-player', title: 'Youtube player', type : 'basic', icon : 'play_circle_filled', link : '/supported-components/youtube-player' } ] } ]; // Replace the navigation data navComponent.navigation = newNavigation; navComponent.refresh(); }