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
new file mode 100644
index 0000000000..9f4e26f65f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigation.directive.js
@@ -0,0 +1,36 @@
+angular.module("umbraco.directives")
+    .directive('umbEditorNavigation', function () {
+        return {
+            scope: {
+                navigation: "="
+            },
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/editor/umb-editor-navigation.html',
+            link: function (scope, element, attrs, ctrl) {
+
+                scope.clickNavigationItem = function(selectedItem) {
+                    setItemToActive(selectedItem);
+                    runItemAction(selectedItem);
+                };
+
+                function runItemAction(selectedItem) {
+                    if(selectedItem.action) {
+                        selectedItem.action(selectedItem);
+                    }
+                }
+
+                function setItemToActive(selectedItem) {
+                    // set all other views to inactive
+                    for (var index = 0; index < scope.navigation.length; index++) {
+                        var item = scope.navigation[index];
+                        item.active = false;
+                    }
+
+                    // set view to active
+                    selectedItem.active = true;
+                }
+
+            }
+        };
+    });
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorsubviews.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorsubviews.directive.js
new file mode 100644
index 0000000000..edf6b0624b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorsubviews.directive.js
@@ -0,0 +1,34 @@
+angular.module("umbraco.directives")
+    .directive('umbEditorSubViews', function () {
+        return {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/editor/umb-editor-sub-views.html',
+            link: function (scope, element, attrs, ctrl) {
+
+                scope.tools = [];
+
+                // set toolbar from selected navigation item
+                function setToolBar(items) {
+
+                    scope.tools = [];
+
+                    for (var index = 0; index < items.length; index++) {
+                        var item = items[index];
+                        if(item.active && item.tools) {
+                            scope.tools = item.tools;
+                        }
+                    }
+                }
+
+                // watch for navigation changes
+                scope.$watch('page.navigation', function(newValue, oldValue) {
+                    if (newValue) {
+
+                        setToolBar(newValue);
+                    }
+                },true);
+
+            }
+        };
+    });
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 557af547e6..5055da2d7c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -90,6 +90,8 @@
 @import "components/overlays.less"; 
 @import "components/card.less"; 
 @import "components/umb-sub-views";
+@import "components/umb-editor-navigation";
+@import "components/umb-editor-sub-views";
 
 
 //page specific styles
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
new file mode 100644
index 0000000000..96222b58fa
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
@@ -0,0 +1,25 @@
+.umb-sub-views-nav {
+  list-style: none;
+  display: flex;
+  margin: 0;
+}
+
+.umb-sub-views-nav-item {
+  text-align: center;
+  margin-left: 20px;
+  cursor: pointer;
+}
+
+.umb-sub-views-nav-item.is-active {
+  color: @blue;
+}
+
+.umb-sub-views-nav-item .icon {
+  font-size: 24px;
+  display: block;
+  text-align: center;
+}
+
+.umb-sub-views-nav-item-text {
+  font-size: 11px;
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-sub-views.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-sub-views.less
new file mode 100644
index 0000000000..33c0161311
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-sub-views.less
@@ -0,0 +1,33 @@
+/* --------- COLUMNS --------- */
+
+.sub-view-columns {
+  display: flex;
+  margin-bottom: 40px;
+}
+
+.sub-view-columns h5 {
+  margin-top: 0;
+}
+
+.sub-view-column-left {
+  flex: 0 0 250px;
+  margin-right: 70px;
+}
+
+.sub-view-column-right {
+  flex: 1;
+}
+
+/* ---------- TOOLS ---------- */
+
+.umb-editor-sub-views-tools {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 20px;
+  height: 25px;
+}
+
+.umb-editor-sub-views-tool {
+  margin-left: 20px;
+  cursor: pointer;
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..1f0ba0ba90
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html
@@ -0,0 +1,6 @@
+<ul class="umb-sub-views-nav">
+    <li class="umb-sub-views-nav-item" ng-repeat="item in navigation" ng-click="clickNavigationItem(item)" ng-class="{'is-active': item.active}">
+        <i class="icon icon-{{ item.icon }}"></i>
+        <span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html
new file mode 100644
index 0000000000..fccf113d91
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html
@@ -0,0 +1,15 @@
+<div class="umb-editor-sub-views">
+
+    <div class="umb-editor-sub-views-tools">
+        <div class="umb-editor-sub-views-tool" ng-repeat="tool in tools" ng-click="tool.action(tool)">
+            <i class="icon-{{tool.icon}}"></i> {{ tool.name }}
+        </div>
+    </div>
+
+    <div class="umb-editor-sub-views-content" ng-repeat="view in page.navigation">
+        <div ng-if="view.view && view.active" ng-include="view.view"></div>
+        <div ng-if="!view.view && view.active" ng-transclude></div>
+    </div>
+
+</div>
+