home chevron_right Documentation chevron_right Components
Navigation

`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.

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.

Alternative usage (preferred)

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>

Navigation item types
Grouping

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

Collapsable

{ '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' } ] },

Item

{ 'id' : 'countdown', '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.

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.

Updating the navigation

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

Show / Hide certain navigation items

hidden = false; showHideCalendarMenuItem(): void { // Get the calendar item from the navigation const calendarNavItem = this._fuseNavigationService.getNavigationItem('calendar'); // 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._fuseNavigationService.getNavigationItem('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' }; // Get the calendar item from the navigation const calendarNavItem = this._fuseNavigationService.getNavigationItem('calendar'); // Make the calendar navigation item collapsable calendarNavItem.type = 'collapse'; // Add the navigation item this._fuseNavigationService.addNavigationItem(newNavItem, 'calendar'); }

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!'); } }; // Add the new nav item at the beginning of the navigation this._fuseNavigationService.addNavigationItem(newNavItem, 'start'); }

Remove the Dashboards menu item

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

Register a new navigation and toggle to it

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'); }