diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 30f8f928..3a0d4fbb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -16,6 +16,7 @@ import { UIModule } from './main/content/ui/ui.module';
 import { ComponentsModule } from './main/content/components/components.module';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
 import { FuseConfigService } from './core/services/config.service';
+import { FuseNavigationService } from './core/components/navigation/navigation.service';
 import { ComponentsThirdPartyModule } from './main/content/components-third-party/components-third-party.module';
 import { ServicesModule } from './main/content/services/services.module';
 
@@ -80,7 +81,8 @@ const appRoutes: Routes = [
     ],
     providers   : [
         FuseSplashScreenService,
-        FuseConfigService
+        FuseConfigService,
+        FuseNavigationService
     ],
     bootstrap   : [
         AppComponent
diff --git a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
index 045e077d..4f061e79 100644
--- a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
+++ b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
@@ -9,9 +9,8 @@
     <div class="{{fuseSettings.colorClasses.navbar}}">
 
         <ng-container *ngFor="let item of item.children">
-            <fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='nav-collapse'"
-                                          [item]="item"></fuse-nav-horizontal-collapse>
+            <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
+            <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
         </ng-container>
 
     </div>
diff --git a/src/app/core/components/navigation/navigation.component.html b/src/app/core/components/navigation/navigation.component.html
index 12b31aff..d2cb94b2 100644
--- a/src/app/core/components/navigation/navigation.component.html
+++ b/src/app/core/components/navigation/navigation.component.html
@@ -1,27 +1,32 @@
-<div id="main-navigation" class="nav" [ngClass]="{'horizontal':layout === 'horizontal'}">
+<div id="main-navigation" class="nav"
+     [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
 
+    <!-- Vertical Navigation Layout -->
     <ng-container *ngIf="layout === 'vertical'">
 
-        <ng-container *ngFor="let item of verticalNavigation">
+        <ng-container *ngFor="let item of navigationModel">
 
-            <fuse-nav-vertical-subheader *ngIf="item.type=='subheader'" [item]="item"></fuse-nav-vertical-subheader>
-            <fuse-nav-vertical-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-vertical-item>
-            <fuse-nav-vertical-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-vertical-collapse>
+            <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
+            <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
+            <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
 
         </ng-container>
 
     </ng-container>
+    <!-- / Vertical Navigation Layout -->
 
+    <!-- Horizontal Navigation Layout -->
     <ng-container *ngIf="layout === 'horizontal'">
 
-        <ng-container *ngFor="let item of horizontalNavigation">
+        <ng-container *ngFor="let item of navigationModel">
 
+            <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
+            <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
             <fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='nav-collapse'"
-                                          [item]="item"></fuse-nav-horizontal-collapse>
 
         </ng-container>
 
     </ng-container>
+    <!-- / Horizontal Navigation Layout -->
 
 </div>
diff --git a/src/app/core/components/navigation/navigation.component.ts b/src/app/core/components/navigation/navigation.component.ts
index 02da575c..837363dc 100644
--- a/src/app/core/components/navigation/navigation.component.ts
+++ b/src/app/core/components/navigation/navigation.component.ts
@@ -1,5 +1,6 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { FuseNavigationService } from './navigation.service';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector     : 'fuse-navigation',
@@ -7,17 +8,27 @@ import { FuseNavigationService } from './navigation.service';
     styleUrls    : ['./navigation.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseNavigationComponent
+export class FuseNavigationComponent implements OnDestroy
 {
-    verticalNavigation: any[];
-    horizontalNavigation: any[];
+    navigationModel: any[];
+    navigationModelChangeSubscription: Subscription;
 
     @Input('layout') layout = 'vertical';
 
-    constructor(private navigationService: FuseNavigationService)
+    constructor(private fuseNavigationService: FuseNavigationService)
     {
-        this.verticalNavigation = navigationService.getNavigation('verticalNavItems');
-        this.horizontalNavigation = navigationService.getNavigation('horizontalNavItems');
+        this.navigationModelChangeSubscription =
+            this.fuseNavigationService.onNavigationModelChange
+                .subscribe((navigationModel) => {
+                    console.warn(navigationModel);
+                    this.navigationModel = navigationModel;
+                });
+    }
+
+    ngOnDestroy()
+    {
+        console.warn('destroyed');
+        this.navigationModelChangeSubscription.unsubscribe();
     }
 
 }
diff --git a/src/app/core/components/navigation/navigation.module.ts b/src/app/core/components/navigation/navigation.module.ts
index 9f0bd0bf..42e680cd 100644
--- a/src/app/core/components/navigation/navigation.module.ts
+++ b/src/app/core/components/navigation/navigation.module.ts
@@ -4,7 +4,7 @@ import { RouterModule } from '@angular/router';
 import { FuseNavigationComponent } from './navigation.component';
 import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component';
 import { FuseNavVerticalCollapseComponent } from './vertical/nav-collapse/nav-vertical-collapse.component';
-import { FuseNavVerticalSubheaderComponent } from './vertical/nav-subheader/nav-vertical-subheader.component';
+import { FuseNavVerticalGroupComponent } from './vertical/nav-group/nav-vertical-group.component';
 import { FuseNavHorizontalItemComponent } from './horizontal/nav-item/nav-horizontal-item.component';
 import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/nav-horizontal-collapse.component';
 
@@ -18,7 +18,7 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na
     ],
     declarations: [
         FuseNavigationComponent,
-        FuseNavVerticalSubheaderComponent,
+        FuseNavVerticalGroupComponent,
         FuseNavVerticalItemComponent,
         FuseNavVerticalCollapseComponent,
         FuseNavHorizontalItemComponent,
diff --git a/src/app/core/components/navigation/navigation.service.ts b/src/app/core/components/navigation/navigation.service.ts
index 8e71d2e0..8a8e06d0 100644
--- a/src/app/core/components/navigation/navigation.service.ts
+++ b/src/app/core/components/navigation/navigation.service.ts
@@ -1,25 +1,43 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { FuseNavigation } from '../../../navigation.model';
+import { NavigationModel } from '../../../navigation.model';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class FuseNavigationService
 {
     onNavCollapseToggled = new EventEmitter<any>();
-    navigation: FuseNavigation;
+    onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
+    navigationModel: NavigationModel;
     flatNavigation: any[] = [];
 
     constructor()
     {
-        this.navigation = new FuseNavigation();
+        this.navigationModel = new NavigationModel();
+        this.onNavigationModelChange.next(this.navigationModel.model);
     }
 
     /**
-     * Get navigation array
+     * Get navigation model
      * @returns {any[]}
      */
-    getNavigation(item)
+    getNavigationModel()
     {
-        return this.navigation[item];
+        return this.navigationModel.model;
+    }
+
+    /**
+     * Set the navigation model
+     * @param model
+     */
+    setNavigationModel(model)
+    {
+        // console.log(model);
+
+        this.navigationModel = model;
+
+        console.log(this.navigationModel);
+
+        this.onNavigationModelChange.next(this.navigationModel.model);
     }
 
     /**
@@ -31,7 +49,7 @@ export class FuseNavigationService
     {
         if ( !navigationItems )
         {
-            navigationItems = this.navigation;
+            navigationItems = this.navigationModel;
         }
 
         for ( const navItem of navigationItems )
@@ -41,7 +59,7 @@ export class FuseNavigationService
                 continue;
             }
 
-            if ( navItem.type === 'nav-item' )
+            if ( navItem.type === 'item' )
             {
                 this.flatNavigation.push({
                     title: navItem.title,
@@ -53,7 +71,7 @@ export class FuseNavigationService
                 continue;
             }
 
-            if ( navItem.type === 'nav-collapse' )
+            if ( navItem.type === 'collapse' || navItem.type === 'group' )
             {
                 this.getFlatNavigation(navItem.children);
             }
diff --git a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
index ce5449a3..2c3e9647 100644
--- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
+++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
@@ -5,7 +5,7 @@
 </a>
 <div class="children" [@slideInOut]="isOpen">
     <ng-container *ngFor="let item of item.children">
-        <fuse-nav-vertical-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-vertical-item>
-        <fuse-nav-vertical-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-vertical-collapse>
+        <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
+        <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
     </ng-container>
 </div>
diff --git a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
index 5585f1e5..e4baa861 100644
--- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
+++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
@@ -15,7 +15,10 @@ export class FuseNavVerticalCollapseComponent implements OnInit
     @HostBinding('class') classes = 'nav-collapse nav-item';
     @HostBinding('class.open') public isOpen = false;
 
-    constructor(private navigationService: FuseNavigationService, private router: Router)
+    constructor(
+        private navigationService: FuseNavigationService,
+        private router: Router
+    )
     {
         // Listen for route changes
         router.events.subscribe(
@@ -49,6 +52,13 @@ export class FuseNavVerticalCollapseComponent implements OnInit
                             return;
                         }
 
+                        // Check if the url can be found in
+                        // one of the children of this item
+                        if ( this.isUrlInChildren(this.item, this.router.url) )
+                        {
+                            return;
+                        }
+
                         // If the clicked item is not this item, collapse...
                         if ( this.item !== clickedItem )
                         {
diff --git a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html
new file mode 100644
index 00000000..3fd40abf
--- /dev/null
+++ b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html
@@ -0,0 +1,10 @@
+<div class="group-title">
+    <span class="hint-text">{{ item.title }}</span>
+</div>
+<div class="group-items">
+    <ng-container *ngFor="let item of item.children">
+        <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
+        <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
+        <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
+    </ng-container>
+</div>
\ No newline at end of file
diff --git a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
new file mode 100644
index 00000000..7021a70f
--- /dev/null
+++ b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
@@ -0,0 +1,23 @@
+:host {
+
+    .folded:not(.folded-open) & {
+
+        > .group-title {
+            align-items: center;
+
+            > span {
+                opacity: 0;
+                transition: opacity 200ms ease;
+            }
+
+            &:before {
+                content: '';
+                display: block;
+                position: absolute;
+                min-width: 1.6rem;
+                border-top: 2px solid;
+                opacity: 0.2;
+            }
+        }
+    }
+}
diff --git a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
new file mode 100644
index 00000000..f429b5d1
--- /dev/null
+++ b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
@@ -0,0 +1,21 @@
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-nav-vertical-group',
+    templateUrl: './nav-vertical-group.component.html',
+    styleUrls  : ['./nav-vertical-group.component.scss']
+})
+export class FuseNavVerticalGroupComponent implements OnInit
+{
+    @HostBinding('class') classes = 'nav-group';
+    @Input() item: any;
+
+    constructor()
+    {
+    }
+
+    ngOnInit()
+    {
+    }
+
+}
diff --git a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.html b/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.html
deleted file mode 100644
index 208267c6..00000000
--- a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<span class="hint-text">{{ item.title }}</span>
diff --git a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.scss b/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.scss
deleted file mode 100644
index 53ab5b7f..00000000
--- a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-
-:host {
-
-    .folded:not(.folded-open) & {
-
-        &:before {
-            content: '';
-            display: block;
-            position: absolute;
-            min-width: 1.6rem;
-            border-top: 2px solid;
-            opacity: 0.2;
-        }
-
-        > span {
-            opacity: 0;
-            transition: opacity 200ms ease;
-        }
-    }
-}
diff --git a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.ts b/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.ts
deleted file mode 100644
index 72a00643..00000000
--- a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component, HostBinding, Input, OnInit } from '@angular/core';
-
-@Component({
-    selector   : 'fuse-nav-vertical-subheader',
-    templateUrl: './nav-vertical-subheader.component.html',
-    styleUrls  : ['./nav-vertical-subheader.component.scss']
-})
-export class FuseNavVerticalSubheaderComponent implements OnInit
-{
-    @HostBinding('class') classes = 'nav-subheader';
-    @Input() item: any;
-
-    constructor()
-    {
-    }
-
-    ngOnInit()
-    {
-    }
-
-}
diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts
index 93885da7..8e83073b 100644
--- a/src/app/core/modules/shared.module.ts
+++ b/src/app/core/modules/shared.module.ts
@@ -12,7 +12,6 @@ import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../
 import { FusePipesModule } from '../pipes/pipes.module';
 import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
-import { FuseNavigationService } from '../components/navigation/navigation.service';
 import { FuseMatchMedia } from '../services/match-media.service';
 import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
 import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
@@ -70,7 +69,6 @@ import { CookieService } from 'ngx-cookie-service';
     ],
     providers      : [
         CookieService,
-        FuseNavigationService,
         FuseMatchMedia,
         FuseNavbarVerticalService,
         FuseMdSidenavHelperService
diff --git a/src/app/core/scss/partials/_navigation.scss b/src/app/core/scss/partials/_navigation.scss
index f003e88e..0c8e8607 100644
--- a/src/app/core/scss/partials/_navigation.scss
+++ b/src/app/core/scss/partials/_navigation.scss
@@ -11,6 +11,21 @@
         white-space: nowrap;
     }
 
+    .nav-group {
+
+        > .group-title {
+            position: relative;
+            display: flex;
+            align-items: center;
+            height: 48px;
+            font-weight: 500;
+            padding-left: 24px;
+            margin-top: 8px;
+            font-size: 12px;
+            white-space: nowrap;
+        }
+    }
+
     .nav-item {
 
         .nav-link {
@@ -119,6 +134,31 @@
         }
     }
 
+    > .nav-group {
+
+        > .group-items {
+
+            > .nav-collapse {
+                background: transparent;
+                transition: background 200ms ease-in-out;
+
+                &.open {
+                    background: rgba(0, 0, 0, 0.12);
+                }
+            }
+        }
+    }
+
+    &.vertical {
+
+        .nav-group {
+
+            .group-title {
+                text-transform: uppercase;
+            }
+        }
+    }
+
     &.horizontal {
         display: flex;
         flex-direction: row;
diff --git a/src/app/navigation.model.ts b/src/app/navigation.model.ts
index 25a1920e..9c1210fc 100644
--- a/src/app/navigation.model.ts
+++ b/src/app/navigation.model.ts
@@ -1,415 +1,22 @@
-export class FuseNavigation
+export class NavigationModel
 {
-    public verticalNavItems: any[];
-    public horizontalNavItems: any[];
+    public model: any[];
 
     constructor()
     {
-        this.verticalNavItems = [
-            {
-                'title': 'APPS',
-                'type' : 'subheader'
-            },
-            {
-                'title'   : 'Dashboards',
-                'type'    : 'nav-collapse',
-                'icon'    : 'dashboard',
-                'children': [
-                    {
-                        'type' : 'nav-item',
-                        'title': 'Project',
-                        'url'  : '/apps/dashboards/project'
-                    }
-                ]
-            },
-            {
-                'title': 'Calendar',
-                'type' : 'nav-item',
-                'icon' : 'today',
-                'url'  : '/apps/calendar'
-            },
-            {
-                'title': 'Mail',
-                'type' : 'nav-item',
-                'icon' : 'email',
-                'url'  : '/apps/mail',
-                'badge': {
-                    'title': 25,
-                    'bg'   : '#F44336',
-                    'fg'   : '#FFFFFF'
-                }
-            },
-            {
-                'title': 'Chat',
-                'type' : 'nav-item',
-                'icon' : 'chat',
-                'url'  : '/apps/chat',
-                'badge': {
-                    'title': 13,
-                    'bg'   : '#09d261',
-                    'fg'   : '#FFFFFF'
-                }
-            },
-            {
-                'title': 'File Manager',
-                'type' : 'nav-item',
-                'icon' : 'folder',
-                'url'  : '/apps/file-manager'
-            },
-            {
-                'title': 'Contacts',
-                'type' : 'nav-item',
-                'icon' : 'account_box',
-                'url'  : '/apps/contacts'
-            },
-            {
-                'title': 'To-Do',
-                'type' : 'nav-item',
-                'icon' : 'check_box',
-                'url'  : '/apps/todo',
-                'badge': {
-                    'title': 3,
-                    'bg'   : '#FF6F00',
-                    'fg'   : '#FFFFFF'
-                }
-            },
-            {
-                'title': 'Scrumboard',
-                'type' : 'nav-item',
-                'icon' : 'assessment',
-                'url'  : '/apps/scrumboard'
-            },
-            {
-                'title': 'PAGES',
-                'type' : 'subheader'
-            },
-            {
-                'title'   : 'Authentication',
-                'type'    : 'nav-collapse',
-                'icon'    : 'lock',
-                'children': [
-                    {
-                        'title': 'Login',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/auth/login'
-                    },
-                    {
-                        'title': 'Login v2',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/auth/login-2'
-                    },
-                    {
-                        'title': 'Register',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/auth/register'
-                    },
-                    {
-                        'title': 'Register v2',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/auth/register-2'
-                    },
-                    {
-                        'title': 'Forgot Password',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/auth/forgot-password'
-                    },
-                    {
-                        'title': 'Reset Password',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/auth/reset-password'
-                    },
-                    {
-                        'title': 'Lock Screen',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/auth/lock'
-                    }
-                ]
-            },
-            {
-                'title': 'Coming Soon',
-                'type' : 'nav-item',
-                'icon' : 'alarm',
-                'url'  : '/pages/coming-soon'
-            },
-            {
-                'title'   : 'Errors',
-                'type'    : 'nav-collapse',
-                'icon'    : 'error',
-                'children': [
-                    {
-                        'title': '404',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/errors/error-404'
-                    },
-                    {
-                        'title': '500',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/errors/error-500'
-                    }
-                ]
-            },
-            {
-                'title'   : 'Invoice',
-                'type'    : 'nav-collapse',
-                'icon'    : 'receipt',
-                'children': [
-                    {
-                        'title': 'Modern',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/invoices/modern'
-                    },
-                    {
-                        'title': 'Compact',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/invoices/compact'
-                    }
-                ]
-            },
-            {
-                'title': 'Maintenance',
-                'type' : 'nav-item',
-                'icon' : 'build',
-                'url'  : '/pages/maintenance'
-            },
-            {
-                'title': 'Profile',
-                'type' : 'nav-item',
-                'icon' : 'person',
-                'url'  : '/pages/profile'
-            },
-            {
-                'title': 'Search',
-                'type' : 'nav-item',
-                'icon' : 'search',
-                'url'  : '/pages/search'
-            },
-            {
-                'title': 'USER INTERFACE',
-                'type' : 'subheader'
-            },
-            {
-                'title': 'Forms',
-                'type' : 'nav-item',
-                'icon' : 'web_asset',
-                'url'  : '/ui/forms'
-            },
-            {
-                'title': 'Icons',
-                'type' : 'nav-item',
-                'icon' : 'photo',
-                'url'  : '/ui/icons'
-            },
-            {
-                'title': 'Typography',
-                'type' : 'nav-item',
-                'icon' : 'text_fields',
-                'url'  : '/ui/typography'
-            },
-            {
-                'title': 'Helper Classes',
-                'type' : 'nav-item',
-                'icon' : 'help',
-                'url'  : '/ui/helper-classes'
-            },
-            {
-                'title'   : 'Page Layouts',
-                'type'    : 'nav-collapse',
-                'icon'    : 'view_quilt',
-                'children': [
-                    {
-                        'title'   : 'Carded',
-                        'type'    : 'nav-collapse',
-                        'children': [
-                            {
-                                'title': 'Full Width',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/carded/full-width'
-                            },
-                            {
-                                'title': 'Full Width 2',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/carded/full-width-2'
-                            },
-                            {
-                                'title': 'Left Sidenav',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/carded/left-sidenav'
-                            },
-                            {
-                                'title': 'Left Sidenav 2',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/carded/left-sidenav-2'
-                            },
-                            {
-                                'title': 'Right Sidenav',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/carded/right-sidenav'
-                            },
-                            {
-                                'title': 'Right Sidenav 2',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/carded/right-sidenav-2'
-                            }
-                        ]
-                    },
-                    {
-                        'title'   : 'Simple',
-                        'type'    : 'nav-collapse',
-                        'children': [
-                            {
-                                'title': 'Full Width',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/full-width'
-                            },
-                            {
-                                'title': 'Left Sidenav',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/left-sidenav'
-                            },
-                            {
-                                'title': 'Left Sidenav 2',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/left-sidenav-2'
-                            },
-                            {
-                                'title': 'Left Sidenav 3',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/left-sidenav-3'
-                            },
-                            {
-                                'title': 'Right Sidenav',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/right-sidenav'
-                            },
-                            {
-                                'title': 'Right Sidenav 2',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/right-sidenav-2'
-                            },
-                            {
-                                'title': 'Right Sidenav 3',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/right-sidenav-3'
-                            },
-                            {
-                                'title': 'Tabbed',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/tabbed'
-                            }
-                        ]
-                    },
-                    {
-                        'title': 'Blank',
-                        'type' : 'nav-item',
-                        'url'  : '/ui/page-layouts/blank'
-                    }
-                ]
-            },
-            {
-                'title': 'Colors',
-                'type' : 'nav-item',
-                'icon' : 'color_lens',
-                'url'  : '/ui/colors'
-            },
-            {
-                'title': 'SERVICES',
-                'type' : 'subheader'
-            },
-            {
-                'title': 'Config',
-                'type' : 'nav-item',
-                'icon' : 'settings',
-                'url'  : '/services/config'
-            },
-            {
-                'title': 'Splash Screen',
-                'type' : 'nav-item',
-                'icon' : 'settings',
-                'url'  : '/services/splash-screen'
-            },
-            {
-                'title': 'COMPONENTS',
-                'type' : 'subheader'
-            },
-            {
-                'title': 'Countdown',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/countdown'
-            },
-            {
-                'title': 'Highlight.js',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/highlightjs'
-            },
-            {
-                'title': 'Material Color Picker',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/material-color-picker'
-            },
-            {
-                'title': 'Navigation',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/navigation'
-            },
-            {
-                'title': 'Price Tables',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/price-tables'
-            },
-            {
-                'title': 'Search Bar',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/search-bar'
-            },
-            {
-                'title': 'Shortcuts',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/shortcuts'
-            },
-            {
-                'title': 'Widget',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/widget'
-            },
-            {
-                'title': '3RD PARTY COMPONENTS',
-                'type' : 'subheader'
-            },
-            {
-                'title'   : 'Datatables',
-                'type'    : 'nav-collapse',
-                'icon'    : 'border_all',
-                'children': [
-                    {
-                        'title': 'ngx-datatable',
-                        'type' : 'nav-item',
-                        'url'  : '/components-third-party/datatables/ngx-datatable'
-                    }
-                ]
-            }
-        ];
-
-        this.horizontalNavItems = [
+        this.model = [
             {
                 'title'   : 'Applications',
+                'type'    : 'group',
                 'icon'    : 'apps',
-                'type'    : 'nav-collapse',
                 'children': [
                     {
                         'title'   : 'Dashboards',
-                        'type'    : 'nav-collapse',
+                        'type'    : 'collapse',
                         'icon'    : 'dashboard',
                         'children': [
                             {
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'title': 'Project',
                                 'url'  : '/apps/dashboards/project'
                             }
@@ -417,13 +24,13 @@ export class FuseNavigation
                     },
                     {
                         'title': 'Calendar',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'today',
                         'url'  : '/apps/calendar'
                     },
                     {
                         'title': 'Mail',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'email',
                         'url'  : '/apps/mail',
                         'badge': {
@@ -434,7 +41,7 @@ export class FuseNavigation
                     },
                     {
                         'title': 'Chat',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'chat',
                         'url'  : '/apps/chat',
                         'badge': {
@@ -445,19 +52,19 @@ export class FuseNavigation
                     },
                     {
                         'title': 'File Manager',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'folder',
                         'url'  : '/apps/file-manager'
                     },
                     {
                         'title': 'Contacts',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'account_box',
                         'url'  : '/apps/contacts'
                     },
                     {
                         'title': 'To-Do',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'check_box',
                         'url'  : '/apps/todo',
                         'badge': {
@@ -468,7 +75,7 @@ export class FuseNavigation
                     },
                     {
                         'title': 'Scrumboard',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'assessment',
                         'url'  : '/apps/scrumboard'
                     }
@@ -476,106 +83,106 @@ export class FuseNavigation
             },
             {
                 'title'   : 'Pages',
+                'type'    : 'group',
                 'icon'    : 'pages',
-                'type'    : 'nav-collapse',
                 'children': [
                     {
                         'title'   : 'Authentication',
-                        'type'    : 'nav-collapse',
+                        'type'    : 'collapse',
                         'icon'    : 'lock',
                         'children': [
                             {
                                 'title': 'Login',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/auth/login'
                             },
                             {
                                 'title': 'Login v2',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/auth/login-2'
                             },
                             {
                                 'title': 'Register',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/auth/register'
                             },
                             {
                                 'title': 'Register v2',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/auth/register-2'
                             },
                             {
                                 'title': 'Forgot Password',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/auth/forgot-password'
                             },
                             {
                                 'title': 'Reset Password',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/auth/reset-password'
                             },
                             {
                                 'title': 'Lock Screen',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/auth/lock'
                             }
                         ]
                     },
                     {
                         'title': 'Coming Soon',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'alarm',
                         'url'  : '/pages/coming-soon'
                     },
                     {
                         'title'   : 'Errors',
-                        'type'    : 'nav-collapse',
+                        'type'    : 'collapse',
                         'icon'    : 'error',
                         'children': [
                             {
                                 'title': '404',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/errors/error-404'
                             },
                             {
                                 'title': '500',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/errors/error-500'
                             }
                         ]
                     },
                     {
                         'title'   : 'Invoice',
-                        'type'    : 'nav-collapse',
+                        'type'    : 'collapse',
                         'icon'    : 'receipt',
                         'children': [
                             {
                                 'title': 'Modern',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/invoices/modern'
                             },
                             {
                                 'title': 'Compact',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/invoices/compact'
                             }
                         ]
                     },
                     {
                         'title': 'Maintenance',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'build',
                         'url'  : '/pages/maintenance'
                     },
                     {
                         'title': 'Profile',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'person',
                         'url'  : '/pages/profile'
                     },
                     {
                         'title': 'Search',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'search',
                         'url'  : '/pages/search'
                     }
@@ -583,130 +190,130 @@ export class FuseNavigation
             },
             {
                 'title'   : 'User Interface',
+                'type'    : 'group',
                 'icon'    : 'web',
-                'type'    : 'nav-collapse',
                 'children': [
                     {
                         'title': 'Forms',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'web_asset',
                         'url'  : '/ui/forms'
                     },
                     {
                         'title': 'Icons',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'photo',
                         'url'  : '/ui/icons'
                     },
                     {
                         'title': 'Typography',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'text_fields',
                         'url'  : '/ui/typography'
                     },
                     {
                         'title': 'Helper Classes',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'help',
                         'url'  : '/ui/helper-classes'
                     },
                     {
                         'title'   : 'Page Layouts',
-                        'type'    : 'nav-collapse',
+                        'type'    : 'collapse',
                         'icon'    : 'view_quilt',
                         'children': [
                             {
                                 'title'   : 'Carded',
-                                'type'    : 'nav-collapse',
+                                'type'    : 'collapse',
                                 'children': [
                                     {
                                         'title': 'Full Width',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/full-width'
                                     },
                                     {
                                         'title': 'Full Width 2',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/full-width-2'
                                     },
                                     {
                                         'title': 'Left Sidenav',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/left-sidenav'
                                     },
                                     {
                                         'title': 'Left Sidenav 2',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/left-sidenav-2'
                                     },
                                     {
                                         'title': 'Right Sidenav',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/right-sidenav'
                                     },
                                     {
                                         'title': 'Right Sidenav 2',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/right-sidenav-2'
                                     }
                                 ]
                             },
                             {
                                 'title'   : 'Simple',
-                                'type'    : 'nav-collapse',
+                                'type'    : 'collapse',
                                 'children': [
                                     {
                                         'title': 'Full Width',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/full-width'
                                     },
                                     {
                                         'title': 'Left Sidenav',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/left-sidenav'
                                     },
                                     {
                                         'title': 'Left Sidenav 2',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/left-sidenav-2'
                                     },
                                     {
                                         'title': 'Left Sidenav 3',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/left-sidenav-3'
                                     },
                                     {
                                         'title': 'Right Sidenav',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/right-sidenav'
                                     },
                                     {
                                         'title': 'Right Sidenav 2',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/right-sidenav-2'
                                     },
                                     {
                                         'title': 'Right Sidenav 3',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/right-sidenav-3'
                                     },
                                     {
                                         'title': 'Tabbed',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/tabbed'
                                     }
                                 ]
                             },
                             {
                                 'title': 'Blank',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/ui/page-layouts/blank'
                             }
                         ]
                     },
                     {
                         'title': 'Colors',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'color_lens',
                         'url'  : '/ui/colors'
                     }
@@ -714,18 +321,18 @@ export class FuseNavigation
             },
             {
                 'title'   : 'Services',
+                'type'    : 'group',
                 'icon'    : 'settings',
-                'type'    : 'nav-collapse',
                 'children': [
                     {
                         'title': 'Config',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings',
                         'url'  : '/services/config'
                     },
                     {
                         'title': 'Splash Screen',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings',
                         'url'  : '/services/splash-screen'
                     }
@@ -733,73 +340,73 @@ export class FuseNavigation
             },
             {
                 'title'   : 'Components',
+                'type'    : 'group',
                 'icon'    : 'settings_input_component',
-                'type'    : 'nav-collapse',
                 'children': [
                     {
                         'title': 'Countdown',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/countdown'
                     },
                     {
                         'title': 'Highlight.js',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/highlightjs'
                     },
                     {
                         'title': 'Material Color Picker',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/material-color-picker'
                     },
                     {
                         'title': 'Navigation',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/navigation'
                     },
                     {
                         'title': 'Price Tables',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/price-tables'
                     },
                     {
                         'title': 'Search Bar',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/search-bar'
                     },
                     {
                         'title': 'Shortcuts',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/shortcuts'
                     },
                     {
                         'title': 'Widget',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/widget'
-                    },
+                    }
+                ]
+            },
+            {
+                'title'   : '3rd Party components',
+                'type'    : 'group',
+                'icon'    : 'settings_input_component',
+                'children': [
                     {
-                        'title'   : '3rd Party components',
-                        'icon'    : 'settings_input_component',
-                        'type'    : 'nav-collapse',
+                        'title'   : 'Datatables',
+                        'type'    : 'collapse',
+                        'icon'    : 'border_all',
                         'children': [
                             {
-                                'title'   : 'Datatables',
-                                'type'    : 'nav-collapse',
-                                'icon'    : 'border_all',
-                                'children': [
-                                    {
-                                        'title': 'ngx-datatable',
-                                        'type' : 'nav-item',
-                                        'url'  : '/components-third-party/datatables/ngx-datatable'
-                                    }
-                                ]
+                                'title': 'ngx-datatable',
+                                'type' : 'item',
+                                'url'  : '/components-third-party/datatables/ngx-datatable'
                             }
                         ]
                     }