diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts
index 5d864e1c..84e3c2a2 100644
--- a/src/@fuse/components/theme-options/theme-options.component.ts
+++ b/src/@fuse/components/theme-options/theme-options.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
 import { Subscription } from 'rxjs/Subscription';
 
@@ -6,8 +6,6 @@ import { fuseAnimations } from '@fuse/animations';
 import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
-import { navigation } from 'app/navigation/navigation';
-
 @Component({
     selector   : 'fuse-theme-options',
     templateUrl: './theme-options.component.html',
@@ -16,6 +14,7 @@ import { navigation } from 'app/navigation/navigation';
 })
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 {
+    @Input() navigation;
     @ViewChild('openButton') openButton;
     @ViewChild('panel') panel;
     @ViewChild('overlay') overlay: ElementRef;
@@ -43,10 +42,17 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                         this.config = newConfig;
                     }
                 );
+    }
+
+    ngOnInit()
+    {
+        this.renderer.listen(this.overlay.nativeElement, 'click', () => {
+            this.closeBar();
+        });
 
         // Get the nav model and add customize nav item
         // that opens the bar programmatically
-        const nav: any = navigation;
+        const nav: any = this.navigation;
 
         nav.push({
             'id'      : 'custom-function',
@@ -66,13 +72,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
         });
     }
 
-    ngOnInit()
-    {
-        this.renderer.listen(this.overlay.nativeElement, 'click', () => {
-            this.closeBar();
-        });
-    }
-
     ngOnDestroy()
     {
         this.onConfigChanged.unsubscribe();
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index 39d8905e..d7931489 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -74,4 +74,4 @@
 
 </mat-sidenav-container>
 
-<fuse-theme-options></fuse-theme-options>
+<fuse-theme-options [navigation]="navigation"></fuse-theme-options>
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index e1ff1281..ff4714b0 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -5,6 +5,8 @@ import { Subscription } from 'rxjs/Subscription';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 
+import { navigation } from 'app/navigation/navigation';
+
 @Component({
     selector     : 'fuse-main',
     templateUrl  : './main.component.html',
@@ -15,6 +17,8 @@ export class FuseMainComponent implements OnDestroy
 {
     onConfigChanged: Subscription;
     fuseSettings: any;
+    navigation: any;
+
     @HostBinding('attr.fuse-layout-mode') layoutMode;
 
     constructor(
@@ -38,6 +42,8 @@ export class FuseMainComponent implements OnDestroy
         {
             this.document.body.className += ' is-mobile';
         }
+
+        this.navigation = navigation;
     }
 
     ngOnDestroy()