diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
index 0d78aab0eb..0f1aae940d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
@@ -11,17 +11,27 @@
             if (!scope.serverValidationAliasField) {
                 scope.serverValidationAliasField = "Alias";
             }
-
+            
             scope.vm = {};
             scope.vm.dropdownOpen = false;
             scope.vm.currentVariant = "";
 
             function onInit() {
+                
                 setCurrentVariant();
+                /*
+                angular.forEach(scope.content.apps, (app) => {
+                    if (app.alias === "umbContent") {
+                        console.log("content app", app)
+                        app.type = "dropdown";
+                        app.groups = scope.content.tabs;
+                    }
+                });
+                */
             }
 
             function setCurrentVariant() {
-                angular.forEach(scope.variants, function (variant) {
+                angular.forEach(scope.content.variants, function (variant) {
                     if (variant.active) {
                         scope.vm.currentVariant = variant;
                     }
@@ -72,10 +82,10 @@
             onInit();
 
             //watch for the active culture changing, if it changes, update the current variant
-            if (scope.variants) {
+            if (scope.content.variants) {
                 scope.$watch(function () {
-                    for (var i = 0; i < scope.variants.length; i++) {
-                        var v = scope.variants[i];
+                    for (var i = 0; i < scope.content.variants.length; i++) {
+                        var v = scope.content.variants[i];
                         if (v.active) {
                             return v.language.culture;
                         }
@@ -100,10 +110,9 @@
                 nameDisabled: "<?",
                 menu: "=",
                 hideMenu: "<?",
-                variants: "=",
+                content: "=",
                 openVariants: "<",
                 hideChangeVariant: "<?",
-                navigation: "=",
                 onSelectNavigationItem: "&?",
                 showBackButton: "<?",
                 splitViewOpen: "=?",
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigation.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigation.directive.js
index 6b269ad17e..43a17c0139 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigation.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigation.directive.js
@@ -17,9 +17,7 @@
                 name: "More"
             };
 
-            scope.openNavigationItem = function (item) {
-                
-                console.log("openNavigationItem", item)
+            scope.openNavigationItem = function(item) {
                 
                 scope.showDropdown = false;
                 runItemAction(item);
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js
index 60a5a54d0f..cbbedf9de3 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js
@@ -15,12 +15,12 @@ Use this directive to render tab content. For an example see: {@link umbraco.dir
     
     function UmbEditorNavigationItemController($scope, $element, $attrs) {
         
-        console.log("LINKKK!")
+        $element[0].classList.add('umb-sub-views-nav-item')
+        
         var vm = this;
         
-        this.callbackOpen = function(item) {
-            console.log("callbackOpen")
-            vm.open({item:vm.item});
+        this.callOpen = function() {
+            vm.onOpen({item:vm.item});
         };
     }
     
@@ -32,7 +32,7 @@ Use this directive to render tab content. For an example see: {@link umbraco.dir
             controllerAs: 'vm',
             bindings: {
                 item: '=',
-                open: '&',
+                onOpen: '&',
                 index: '@'
             }
         });
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 78e9cabcfc..db45755e5c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -105,6 +105,7 @@
 @import "components/editor/umb-editor.less";
 @import "components/umb-sub-views.less";
 @import "components/umb-editor-navigation.less";
+@import "components/umb-editor-navigation-item.less";
 @import "components/umb-editor-sub-views.less";
 @import "components/editor/subheader/umb-editor-sub-header.less";
 @import "components/umb-flatpickr.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
new file mode 100644
index 0000000000..7e858102e0
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
@@ -0,0 +1,132 @@
+.umb-sub-views-nav-item {
+    
+}
+.umb-sub-views-nav-item a {
+  text-align: center;
+  cursor: pointer;
+  display: block;
+  padding: 4px 10px 0 10px;
+  min-width: 70px;
+  border-right: 1px solid @gray-9;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: @editorHeaderHeight;
+  position: relative;
+  
+  color: @ui-active-type;
+  
+  &:hover {
+      color: @ui-active-type-hover !important;
+  }
+  
+  &::after {
+      content: "";
+      height: 0px;
+      left: 8px;
+      right: 8px;
+      background-color: @ui-light-active-border;
+      position: absolute;
+      bottom: 0;
+      border-radius: 3px 3px 0 0;
+      opacity: 0;
+      transition: all .2s linear;
+  }
+}
+
+.umb-sub-views-nav-item a:focus {
+  outline: none;
+}
+
+.umb-sub-views-nav-item a:hover,
+.umb-sub-views-nav-item a:focus {
+  text-decoration: none;
+}
+
+.umb-sub-views-nav-item a.is-active {
+    
+    color: @ui-light-active-type;
+    
+    &::after {
+        opacity: 1;
+        height: 4px;
+    }
+}
+
+.show-validation .umb-sub-views-nav-item a.-has-error {
+  color: @red;
+}
+
+.umb-sub-views-nav-item .icon {
+  font-size: 24px;
+  display: block;
+  text-align: center;
+  margin-bottom: 7px;
+}
+
+.umb-sub-views-nav-item .badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  min-width: 16px;
+  color: @white;
+  background-color: @ui-active-type;
+  border: 2px solid @white;
+  border-radius: 50%;
+  font-size: 10px;
+  font-weight: bold;
+  padding: 2px;
+  line-height: 16px;
+  display: block;
+
+  &.-type-alert {
+    background-color: @red;
+  }
+  &.-type-warning {
+    background-color: @yellow-d2;
+  }
+  &:empty {
+    height: 12px;
+    min-width: 12px;
+  }
+}
+
+.umb-sub-views-nav-item-text {
+  font-size: 12px;
+  line-height: 1em;
+}
+
+.umb-sub-views-nav-item-more__icon {
+  margin-bottom: 10px;
+}
+
+.umb-sub-views-nav-item-more__icon i {
+	height: 5px;
+  width: 5px;
+  border-radius: 50%;
+  background: @ui-active-type;// fallback if browser doesnt support currentColor
+  background: currentColor;
+  display: inline-block;
+  margin: 0 5px 0 0;
+}
+
+.umb-sub-views-nav-item-more__icon i:last-of-type {
+  margin-right: 0;
+}
+
+.umb-sub-views-nav-item-more__dropdown {
+  left: auto;
+  right: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  min-width: auto;
+  margin-top: 10px;
+}
+.umb-sub-views-nav-item-more__dropdown > li {
+    display: flex;
+}
+.umb-sub-views-nav-item-more__dropdown .umb-sub-views-nav-item:first {
+    border-left: none;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
index f4bbeadc3f..985765e53a 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
@@ -4,137 +4,3 @@
   margin: 0;
   border-left: 1px solid @gray-9;
 }
-
-.umb-sub-views-nav-item {
-  text-align: center;
-  cursor: pointer;
-  display: block;
-  padding: 4px 10px 0 10px;
-  //border-bottom: 4px solid transparent;
-  min-width: 70px;
-  border-right: 1px solid @gray-9;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: @editorHeaderHeight;
-  position: relative;
-  
-  color: @ui-active-type;
-  
-  &:hover {
-      color: @ui-active-type-hover !important;
-  }
-  
-  &::after {
-      content: "";
-      height: 0px;
-      left: 8px;
-      right: 8px;
-      background-color: @ui-light-active-border;
-      position: absolute;
-      bottom: 0;
-      border-radius: 3px 3px 0 0;
-      opacity: 0;
-      transition: all .2s linear;
-  }
-}
-
-.umb-sub-views-nav-item:focus {
-  outline: none;
-}
-
-.umb-sub-views-nav-item:hover,
-.umb-sub-views-nav-item:focus {
-  text-decoration: none;
-}
-
-.umb-sub-views-nav-item.is-active {
-    //color: @ui-active;
-    //border-bottom-color: @ui-active;
-    
-    //background-color: rgba(@ui-active, 0.25);
-    color: @ui-light-active-type;
-    //border-bottom-color: @ui-active;
-    &::after {
-        opacity: 1;
-        height: 4px;
-    }
-}
-
-.show-validation .umb-sub-views-nav-item.-has-error {
-  color: @red;
-}
-
-.umb-sub-views-nav-item .icon {
-  font-size: 24px;
-  display: block;
-  text-align: center;
-  margin-bottom: 7px;
-}
-
-.umb-sub-views-nav-item .badge {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  min-width: 16px;
-  color: @white;
-  background-color: @ui-active-type;
-  border: 2px solid @white;
-  border-radius: 50%;
-  font-size: 10px;
-  font-weight: bold;
-  padding: 2px;
-  line-height: 16px;
-  display: block;
-
-  &.-type-alert {
-    background-color: @red;
-  }
-  &.-type-warning {
-    background-color: @yellow-d2;
-  }
-  &:empty {
-    height: 12px;
-    min-width: 12px;
-  }
-}
-
-.umb-sub-views-nav-item-text {
-  font-size: 12px;
-  line-height: 1em;
-}
-
-.umb-sub-views-nav-item-more__icon {
-  margin-bottom: 10px;
-}
-
-.umb-sub-views-nav-item-more__icon i {
-	height: 5px;
-  width: 5px;
-  border-radius: 50%;
-  background: @ui-active-type;// fallback if browser doesnt support currentColor
-  background: currentColor;
-  display: inline-block;
-  margin: 0 5px 0 0;
-}
-
-.umb-sub-views-nav-item-more__icon i:last-of-type {
-  margin-right: 0;
-}
-
-.umb-sub-views-nav-item-more__dropdown {
-  left: auto;
-  right: 0;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  min-width: auto;
-  margin-top: 10px;
-}
-.umb-sub-views-nav-item-more__dropdown > li {
-    display: flex;
-}
-.umb-sub-views-nav-item-more__dropdown .umb-sub-views-nav-item:first {
-    border-left: none;
-}
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-variant-content.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-variant-content.html
index c03b017a82..84928a00bb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-variant-content.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-variant-content.html
@@ -1,19 +1,18 @@
 <div>
-    <umb-load-indicator 
+    <umb-load-indicator
         ng-if="vm.editor.loading">
     </umb-load-indicator>
 
     <div class="umb-split-view__content" ng-show="!vm.editor.loading">
 
         <ng-form name="contentHeaderForm">
-            <umb-editor-content-header 
+            <umb-editor-content-header
                 menu="vm.page.menu"
                 hide-menu="vm.page.hideActionsMenu"
                 name="vm.editor.content.name"
                 name-disabled="vm.nameDisabled"
-                navigation="vm.editor.content.apps"
+                content="vm.editor.content"
                 on-select-navigation-item="vm.selectApp(item)"
-                variants="vm.editor.content.variants"
                 open-variants="vm.openVariants"
                 hide-change-variant="vm.page.hideChangeVariant"
                 show-back-button="vm.page.listViewPath !== null"
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
index 4861aac8a4..8e308e89b2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
@@ -29,7 +29,7 @@
                             autocomplete="off" />
                     </ng-form>
 
-                    <a ng-if="variants.length > 0 && hideChangeVariant !== true" class="umb-variant-switcher__toggle" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen">
+                    <a ng-if="content.variants.length > 0 && hideChangeVariant !== true" class="umb-variant-switcher__toggle" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen">
                         <span>{{vm.currentVariant.language.name}}</span>
                         <ins class="umb-variant-switcher__expand" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}">&nbsp;</ins>
                     </a>
@@ -39,7 +39,7 @@
                     </span>
 
                     <umb-dropdown ng-if="vm.dropdownOpen" style="width: 100%; max-height: 250px; overflow-y: scroll; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
-                        <umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.active, 'umb-variant-switcher_item--not-allowed': variantIsOpen(variant.language.culture)}" ng-repeat="variant in variants">
+                        <umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.active, 'umb-variant-switcher_item--not-allowed': variantIsOpen(variant.language.culture)}" ng-repeat="variant in content.variants">
                             <a href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
                                 <span class="umb-variant-switcher__name" ng-class="{'bold': variant.language.isDefault}">{{variant.language.name}}</span>
                                 <umb-variant-state variant="variant" class="umb-variant-switcher__state"></umb-variant-state>
@@ -60,10 +60,10 @@
             </a>
         </div>
 
-        <div ng-if="navigation && splitViewOpen !== true" style="margin-left: 20px;">
+        <div ng-if="content.apps && splitViewOpen !== true" style="margin-left: 20px;">
             <umb-editor-navigation
                 data-element="editor-sub-views"
-                navigation="navigation"
+                navigation="content.apps"
                 on-select="selectNavigationItem(item)">
             </umb-editor-navigation>
         </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
index 002e9adfc0..329e96242b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
@@ -1,8 +1,7 @@
 <a data-element="sub-view-{{vm.item.alias}}"
     tabindex="-1"
-    class="umb-sub-views-nav-item"
     ng-href=""
-    ng-click="vm.callbackOpen(vm.item)"
+    ng-click="vm.callOpen(vm.item)"
     hotkey="{{vm.index+1}}"
     hotkey-when-hidden="true"
     ng-class="{'is-active': vm.item.active, '-has-error': vm.item.hasError}">
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html
index 1bc7c5ff4a..31388a54f8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html
@@ -1,11 +1,11 @@
 <ul class="umb-sub-views-nav" ng-show="showNavigation">
 
-    <li ng-repeat="item in navigation | limitTo: itemsLimit ">
-        <div ng-show="item.alias !== 'more'"
-            ng-class="item.errorClass">
+    <li ng-repeat="navItem in navigation | limitTo: itemsLimit ">
+        <div ng-show="navItem.alias !== 'more'"
+            ng-class="navItem.errorClass">
             <umb-editor-navigation-item
-                item="item"
-                open="openNavigationItem"
+                item="navItem"
+                on-open="openNavigationItem(item)"
                 index="{{$index}}">
             </umb-editor-navigation-item>
         </div>
@@ -13,24 +13,27 @@
 
     <li ng-show="showMoreButton" style="position: relative;">
 
-        <a data-element="sub-view-{{moreButton.alias}}"
-            class="umb-sub-views-nav-item umb-sub-views-nav-item-more"
-            href=""
-            ng-click="toggleDropdown()"
-            ng-class="{'is-active': moreButton.active}">
-            <div class="umb-sub-views-nav-item-more__icon"><i></i><i></i><i></i></div>
-            <span class="umb-sub-views-nav-item-text">{{ moreButton.name }}</span>
-        </a>
+        <div class="umb-sub-views-nav-item umb-sub-views-nav-item-more">
 
-        <umb-dropdown ng-show="showDropdown" on-close="hideDropdown()" class="umb-sub-views-nav-item-more__dropdown">
-            <umb-dropdown-item ng-repeat="item in navigation | limitTo: overflowingItems">
-                <umb-editor-navigation-item
-                    item="item"
-                    open="openNavigationItem"
-                    index="{{$index}}">
-                </umb-editor-navigation-item>
-            </umb-dropdown-item>
-        </umb-dropdown>
+            <a data-element="sub-view-{{moreButton.alias}}"
+                href=""
+                ng-click="toggleDropdown()"
+                ng-class="{'is-active': moreButton.active}">
+                <div class="umb-sub-views-nav-item-more__icon"><i></i><i></i><i></i></div>
+                <span class="umb-sub-views-nav-item-text">{{ moreButton.name }}</span>
+            </a>
+
+            <umb-dropdown ng-show="showDropdown" on-close="hideDropdown()" class="umb-sub-views-nav-item-more__dropdown">
+                <umb-dropdown-item ng-repeat="navItem in navigation | limitTo: overflowingItems">
+                    <umb-editor-navigation-item
+                        item="navItem"
+                        on-open="openNavigationItem(item)"
+                        index="{{$index}}">
+                    </umb-editor-navigation-item>
+                </umb-dropdown-item>
+            </umb-dropdown>
+
+        </div>
 
     </li>