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

Navigation item

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

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:

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.

Type aliases

Horizontal navigation

Usage

Here's the basic usage of the 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

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
Disable/Enable navigation item

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!