Ryan Bare
Ryan Bare  -  CMS
Jun 24, 2019
(12 votes)

CMS UI refresh

This was originally released as CMS UI 11.21.0. Due to unintended semantic breaking changes, we have removed CMS UI 11.21.0 from nuget and will re-release in the future with some additional bug fixes. We suggest downgrading to CMS UI 11.20.x for now. Thank you for your feedback and patience. :)

We are introducing a refreshed editor interface in a future release, here is a preview. The new navigation menu is functionally different from its predecessor, but the changes outside of the navigation are purely cosmetic. In order to prevent breaking changes, the new navigation will not automatically replace the old global menu in custom implementations, such as in add-ons; code changes will be required if an add-on wants to use the new navigation instead.

Our first change was to completely redesign CMS UI navigation. This modern navigation takes up less screen space by moving product navigation into a waffle menu in the top left that opens a drawer. 

Once the new navigation was in place, there was a very noticeable stylistic difference between the navigation and the old UI. We set out to bring the UI more in sync with the navigation. To accomplish this, we modified the colors, flattened buttons, removed some dividers for a cleaner look and feel, and changed the font. 

Before and after comparisions:

Jun 24, 2019


Eric Jun 24, 2019 01:09 PM

Very nice! Releasing this to customer today and so far so good! :) 

Daniel Ovaska
Daniel Ovaska Jun 24, 2019 01:46 PM

Looks good!

Eric Jun 24, 2019 01:48 PM

But... Before you do release make sure you also update documentation like https://world.episerver.com/documentation/developer-guides/CMS/user-interface/Extending-the-navigation/ since this does not work anymore with the new interface. The @Html.Raw(ClientResources.RenderResources("Navigation")) is resulting in  <script type="text/javascript" src="/admui/CMS/11.21.0/ClientResources/ReportCenter/ReportCenter.js"></script>

And none of the RenderResources is rendering the required styles for the new look!!!

KennyG Jun 24, 2019 01:49 PM

From hamburger menus to waffles! Love it!

Image result for and in the morning im making waffles

Eric Jun 24, 2019 02:46 PM

Another feedback is to add <a>-tags in the menu so that you follow wcag or a least you can ctrl-click to open admin in another tab i chrome.

Paul Gruffydd
Paul Gruffydd Jun 24, 2019 02:53 PM

I've just tried it out and really like the new look but, just to reinforce Eric's comment above, the new layout causes issues with other add-ons such as Find. Aside from the fact that the UI around Find is still in orange rather than blue, you can no longer access the Find sub-nav and, trying to click back from Find to the CMS is pretty tricky as the sub-nav for the CMS is also inaccessible in the Find UI.

It'd also be good if the quicknavigator was updated from orange to blue for consistency.

Johan Petersson
Johan Petersson Jun 24, 2019 03:53 PM

+1 on links should be links. Hate when you cannot open a link in a new tab.

And yes, navigation is a mess now when navigating to an add-on. How do we use the new navigation in our on views?

There is too little contrast in on-page-edit now. You can hardly see the overlay since it's white now. 

Henrik Fransas
Henrik Fransas Jun 24, 2019 06:07 PM

+1 on Johans comments.

I will try this out and report back

Eric Markson
Eric Markson Jun 24, 2019 07:14 PM

We agree with Johan's comment.

Are we going to see an update for the Find UI relatively quickly? Its a really weird workflow, as none of the top level buttons (except for dashboard) work.

Quan Tran
Quan Tran Jun 25, 2019 03:38 AM

very nice !

Espen Lønnkvist
Espen Lønnkvist Jun 25, 2019 08:20 AM

It seems like using 


instead of 


will render the new global menu.

Like Eric said, an official update of the docs would be nice.

Ryan Bare
Ryan Bare Jun 25, 2019 08:43 AM

Thanks for all of the feedback!

<a> tags for right click/ctrl click support is currently in progress.

We're looking into Find/add-on issues. 

We'll also be reviewing the documentation to update outdated sections.

Eric Jun 25, 2019 09:17 AM

I would say you implemented breaking changes into this release since we need to change all modules for rendering the new menu. I looks nice but breaking all modules except CMS sounds like a breaking change and needs. A sugestion might be to actuelly test with modules as well since no one is using CMS only. If  you run it on DXC you have at least FIND included..

Espen Lønnkvist
Espen Lønnkvist Jun 25, 2019 09:26 AM

I hope you'd make this backwards compatible, so that calling Html.GlobalMenu() would render the correct menu depending on UI version. Or else we have to make all our modules depende on 11.21 instead of 11.1

John-Philip Johansson
John-Philip Johansson Jun 25, 2019 11:48 AM

The idea is for the new navigation menu to be opt-in as the add-on/Product might want to restyle their UI and do some navigation differently. Using the "old" navigation should continue working as before so if it isn't then it's a bug and not a breaking change, and will be fixed.

Patrick Nel
Patrick Nel Aug 2, 2019 08:24 AM


Jason Rodman
Jason Rodman Sep 6, 2019 09:13 PM

Anyone know where the "to view mode" globe link went? It used to be to the left of the help icon. We used that all the time! Now there is no way to view the site outside of the CMS without editing the url. Or am I just missing it?

Mari Jørgensen
Mari Jørgensen Oct 24, 2019 12:28 PM

So even with latest version of Find(13.2.4 ), Find still loads the "old" style sub navigation? This is quite confusing for the editors.

Please login to comment.
Latest blogs
Optimizely Web Experimentation Metrics

Within the domain of Optimizely Web Experimentation Metrics, the emphasis is on objective key performance indicators (KPIs) selected to assess an...

Matthew Dunn | Sep 23, 2023 | Syndicated blog

Optimizely For you Intranet

Having been at Optimizely and in the CMS industry for nearly 16 years I have seen clients’ intranet requirements go from a simple site just to hous...

Robert Folan | Sep 22, 2023

Vulnerability in EPiServer.GoogleAnalytics v3 and v4

Introduction A potential security vulnerability was detected for Optimizely Google Analytics addon (including EPiServer.GoogleAnalytics and...

Bien Nguyen | Sep 20, 2023

Overriding Optimizely’s Content Recommendations Block to Implement Custom Recommendations

Introduction The Content Recommendations add-on for Optimizely CMS dynamically recommends content from your site tailored to the interests of each...

abritt | Sep 13, 2023 | Syndicated blog

Developer contest! Install the AI Assistant and Win Bose QC45 Headphones!

We are thrilled to announce a developer contest where you have the chance to win a pair of Bose Headphones. The goal is to be the first developer t...

Luc Gosso (MVP) | Sep 7, 2023 | Syndicated blog

Send Optimizely notifications with SendGrid API, not SMTP

If your Optimizely site already sends transaction emails through an email platform API, why not do the same with Optimizely notification emails?

Stefan Holm Olsen | Sep 6, 2023 | Syndicated blog