Loading...
Area: Episerver CMS
Applies to versions: 11.21 and higher
Other versions:

Upgrading from old to new navigation menu

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.

chrome_2019-07-30_10-42-32.png

Switching to the new navigation

If you are implementing the navigation for the first time instead of upgrading, see Adding and configuring menu items.

Updating the view

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>

Checking root font size

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.

Updating Styles [Optional]

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.

Do you find this information helpful? Please log in to provide feedback.

Last updated: Sep 11, 2019