home chevron_right Components
Navigation

`fuse-navigation` is a custom built Fuse component allows you to create a multi-level collapsable navigation.

## Usage

<fuse-navigation></fuse-navigation>

## Model

`<fuse-navigation></fuse-navigation>` uses a service and a model file to populate the entire navigation. It supports three different navigation items; Subheader, Collapsable and Item. These items can be mixed and matched to create unique and complex navigation layouts.

### Grouping

{ 'title': 'COMPONENTS', 'type' : 'group', 'children': [ { 'title': 'ngx-datatable', 'type' : 'item', 'url' : '/components/datatables/ngx-datatable' } ] },

### Collapsable

{ 'title' : 'Datatables', 'type' : 'collapse', 'icon' : 'border_all', 'children': [ { 'title': 'ngx-datatable', 'type' : 'nav-item', 'url' : '/components/datatables/ngx-datatable' } ] },

### Item

{ 'title': 'Countdown', 'type' : 'item', 'icon' : 'settings_input_component', 'url' : '/components/countdown' },

## Vertical Navigation Default Folded Status

It's possible to change the default folded status of the navigation.

Edit the `main.component.html` file and look for the `[folded]` attribute on `fuse-navbar-vertical` components.

Assigning `true` to that attribute will make the vertical navigation folded by default.

## Examples

#### Update navigation item on-the-fly

updateMailBadge() { // Get the mail nav item const mailNavItem = this.navigationService.getNavigationItem('applications.mail'); // Update the badge title mailNavItem.badge.title = 35; }

#### Add a subitem to the Calendar nav item

addSubitemToCalendar() { // Prepare the new nav item const newNavItem = { id : 'sub-item', title: 'Sub Item', type : 'item', url : '/apps/calendar' }; // Add the new nav item this.navigationService.addNavigationItem('applications.calendar', newNavItem); }

#### Add a nav item with custom function

addNavItemWithCustomFunction() { // Prepare the new nav item const newNavItem = { id : 'custom-item', title : 'Custom Item', type : 'item', function: () => { alert('Custom function!'); } }; // Get the applications nav item const applicationsNavItem = this.navigationService.getNavigationItem('applications'); // Add the new nav item at the beginning of the applications applicationsNavItem.children.unshift(newNavItem); }