Usage

<fuse-navigation [navigation]="navigation" [layout]="'vertical'"></fuse-navigation>

[navigation]

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

Navigation data can be found in src/app/navigation folder along with its translation files. Navigation data and its translation files are set in app.component.ts file. Check that file for more detailed usage example.

[layout]

There are two different layout options for the component; vertical and horizontal. You can set the layout using the [layout] input.

Updating the navigation

Direct modifications on the navigation data will be reflected to the component. So you can modify the json data, or even create it from scratch using your backend and the changes will reflected to the component immediately.

Grouping

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

Collapsable

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

Item

{ 'title' : 'Countdown', 'translate': 'NAV.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-sidebar components.

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

Examples

Show / Hide certain navigation items

hidden = false; showHideCalendarMenuItem() { // Get the calendar item from the navigation const calendarNavItem = this.navigation[0].children[1]; // Toggle the visibility this.hidden = !this.hidden; calendarNavItem.hidden = this.hidden; }

Update navigation item on-the-fly

updateMailBadge() { // Get the mail nav item const mailNavItem = this.navigation[0].children[4]; // 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' }; // Get the calendar item from the navigation const calendarNavItem = this.navigation[0].children[1]; // Make the calendar navigation item collapsable calendarNavItem.type = 'collapse'; // Create an empty children array calendarNavItem.children = []; // Push the new children calendarNavItem.children.push(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.navigation[0]; // Add the new nav item at the beginning of the applications applicationsNavItem.children.unshift(newNavItem); }