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
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. |
Here's the basic usage of the fuse-vertical-navigation
:
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. | - |
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. |
Here's the basic usage of the fuse-horizontal-navigation
:
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. | - |
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.
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.
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.