In version 11.21 of Episerver CMS UI, a new global navigation menu was introduced that differs slightly from how it worked before. This document highlights those differences and give examples of what to do in each case. For documentation on the earlier version of the navigation menu, see the archived version of this page.
The new navigation menu was introduced for Episerver CMS, but other products and add-ons will need to opt-in to the new menu. There is one exception: if you are using the default Bootstrapper directly, without wrapping it in your own implementation, your add-on will follow the lead of the CMS UI and switch to the new navigation.
If you are implementing the navigation for the first time instead of upgrading, see Adding and configuring menu items.
The first step is to replace the old navigation with the new one in your view. Switch @Html.Raw(Html.GlobalMenu()) out for @Html.Raw(Html.CreatePlatformNavigationMenu())
The new navigation has a fixed position so that it will always be visible, even when scrolling. In order to prevent your content from ending up behind the navigation, you will need to add @Html.Raw(Html.ApplyPlatformNavigation()) to the container element for your content.
@Html.Raw(Html.CreatePlatformNavigationMenu()) <div @Html.Raw(Html.ApplyFullscreenPlatformNavigation())> <!-- Content --> </div>
The new navigation uses the rem unit for sizing, so if you are changing the root font size from the default (16px), it will be inconsistent with the navigation font size in CMS UI. If you are using Bootstrap, Bootstrap 3 modifies the root font size, but Bootstrap 4 does not.
CMS UI has updated its styling to be more closely aligned with the new navigation. If you are using CMS UI classes, you may get some of the new styling while using the old global menu. If you have your own styling, we suggest updating your styles to match the new menu. See ux.episerver.com icons and color palettes.
Last updated: Sep 11, 2019