fuse-navigation is a custom built Fuse component allows you to create a multi-level collapsable navigation. It has built-in support for translations using ngx-translate module.

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

An alternative usage to the above one is to using the Navigation Service. Simply, you get your navigation array, register that as a navigation using the service and then set it as the current navigation. This allows for easier updating and swapping of the navigation:

// Get your navigation array from database or file this.navigation = [...] // Register the navigation to the service this._fuseNavigationService.register('main', this.navigation); // Set the main navigation as our current navigation this._fuseNavigationService.setCurrentNavigation('main');

Once you register your navigation like this, you no longer need to provide the [navigation] input while using the fuse-navigation:

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

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

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

{ 'id' : 'countdown', 'title' : 'Countdown', 'translate': 'NAV.COUNTDOWN', 'type' : 'item', 'icon' : 'settings_input_component', 'url' : '/components/countdown' },

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

Find the layout that you want to edit from app/layout/vertical/ directory. Edit the layout's 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.

In order to make the runtime modifications easier, it's strongly recommended that to give a unique id to all of your navigation items.

hidden = false; showHideCalendarMenuItem(): void { // Toggle the visibility this.hidden = !this.hidden; // Update the calendar menu item this._fuseNavigationService.updateNavigationItem('calendar', { hidden: this.hidden }); }

updateMailBadge() { // Update the badge title this._fuseNavigationService.updateNavigationItem('mail', { badge: { title: 35 } }); }

addSubitemToCalendar() { // Prepare the new nav item const newNavItem = { id : 'sub-item', title: 'Sub Item', type : 'item', url : '/apps/calendar' }; this._fuseNavigationService.updateNavigationItem('calendar', { type: 'collapsable', children: [ newNavItem ] }); }

addNavItemWithCustomFunction() { // Prepare the new nav item const newNavItem = { id : 'custom-item', title : 'Custom Item', type : 'item', function: () => { alert('Custom function!'); } }; // Add the new nav item at the beginning of the navigation this._fuseNavigationService.addNavigationItem(newNavItem, 'start'); }

removeDashboards(): void { this._fuseNavigationService.removeNavigationItem('dashboards'); }

registerNewNavigationAndToggle(): void { const adminNav = [ { id : 'admin', title : 'Admin', type : 'group', icon : 'apps', children: [ { id : 'users', title: 'Users', type : 'item', icon : 'person', url : '/apps/dashboards/analytics' }, { id : 'payments', title: 'Payments', type : 'item', icon : 'attach_money', url : '/apps/academy' } ] }, { id : 'control-panel', title : 'Control Panel', type : 'group', icon : 'apps', children: [ { id : 'cron-jobs', title: 'Cron Jobs', type : 'item', icon : 'settings', url : '/apps/file-manager' }, { id : 'maintenance-mode', title: 'Maintenance Mode', type : 'item', icon : 'build', url : '/apps/todo' } ] } ]; // Register the new navigation this._fuseNavigationService.register('admin-nav', adminNav); // Set the current navigation this._fuseNavigationService.setCurrentNavigation('admin-nav'); }