Remove items from the quick navigator menu in Episerver

Episerver ships with a quick navigator menu on the front end when a user is logged in to the back office, by the following HtmlHelper extension:

@Html.RenderEPiServerQuickNavigator()

You may as explained and indicated by both Jon D Jones and Alf Nilsson take this to your advantage for extending the current menu. But what about removing default items by Episerver?

The default shipped menu is in the CMS edition of Episerver is rendering the Dashboard and CMS Edit items. The custom provided items that we will extend with will be set below these. The following code should look something like this:

[ServiceConfiguration(ServiceType = typeof(IQuickNavigatorItemProvider))]
    public class CustomQuickNavigator : IQuickNavigatorItemProvider
    {
        public int SortOrder { get; set; } = 50;

        public IDictionary<string, QuickNavigatorMenuItem> GetMenuItems(ContentReference currentContent)
        {
            var editNavItem = new QuickNavigatorMenuItem("Go to edit mode", PageEditing.GetEditUrl(currentContent), null, null, null);

            var menuItems = new Dictionary<string, QuickNavigatorMenuItem>();
            menuItems.Add("qn-edit-mode", editNavItem);

            return menuItems;
        }
    }

We will add our own "Go to edit mode" item since some of our clients would like to have that label instead of "CMS Edit". The PageEditing class gives us the ability to send our editors to the edit mode with the currentContent reference.

It is essential to set the SortOrder to queue our custom items after Episerver's defaults, and for the fix which is listed down below.

Since there is no suitable method to override for getting the default items from Episerver (GetMenuItems), you may filter the two first items from EPiserver by plain javascript as shown below:

window.onload = function() {
    filterDefaultQuickNavigator();
}

function filterDefaultQuickNavigator() {
    let quickNav = document.getElementById('epi-quickNavigator-menu');
    let childrenOfQuickNav = quickNav.childNodes;
    let i = childrenOfQuickNav.length;

    // {0} is equal to "Dashboard" item
    // {1} is equal to "CMS edit" item
    while (i--) {
        if (i === 0 || i === 1) {
            childrenOfQuickNav[i].parentNode.removeChild(childrenOfQuickNav[i]);
        }
    }
}

You ought to aswell not load this kind of script in the edit mode.
Kinda dirty but the functionality is at least at place.

In the meantime I have created a feature request to Episerver to extend the IQuickNavigatorItemProvider interface with a proper method to override.