ability to disable an navigation item

src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less

@@ -20,12 +20,18 @@
         justify-content: center;
         height: calc(~'@{editorHeaderHeight}'- ~'1px'); // need to offset the 1px border-bottom on .umb-editor-header - avoids overflowing top of the container
         color: @ui-active-type;
+        user-select: none;
 
         &:hover {
             color: @ui-active-type-hover  !important;
             text-decoration: none;
         }
 
+        &:disabled {
+            pointer-events: none;
+            color: @gray-6;
+        }
+
         &::before {
             content: "";
             position: absolute;

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html

@@ -4,6 +4,7 @@
    hotkey="{{::vm.hotkey}}"
    hotkey-when-hidden="true"
    ng-class="{'is-active': vm.item.active, '-has-error': vm.item.hasError}"
+   ng-disabled="vm.item.disabled"
    class="umb-sub-views-nav-item__action umb-outline umb-outline--thin">
     <i class="icon {{ vm.item.icon }}" aria-hidden="true"></i>
     <span class="umb-sub-views-nav-item-text">{{ vm.item.name }}</span>