Try our conversational search powered by Generative AI!

Dung Le
Feb 1, 2010
  11125
(3 votes)

Create Global Navigation in EPiServer CMS 6 RC1

Intro

The global navigation helps users navigate different integrated products such as EPiServer CMS, EPiServer Community, and EPiServer Mail but also third party products as ImageVault or similar integrated modules which would like to expose their interfaces to the logged on user.

The global navigation can be customized (it’s a new plugin-area) and it’s possible to insert the menu into both (custom) web forms and MVC views.

The menu is designed to be oriented on products and modules, so that each top menu item represents a product while the sub level menu contains the actual views/functions/parts of the product.

There are 3 solutions to make a new Global Navigation:

- Using MenuItemAttribute

- Using MenuProvider

- Using configuration section in web.config

Both MenuProvider and MenuItemAttribute need more configuration in web.config. Add assemblies section like this

<episerver.shell>
        <protectedModules rootPath="~/cms/UI/" >
            <add name="Shell">
              <assemblies>
                <add assembly="EPiServer.Sample.GlobalNavigation.UI" />
              </assemblies>
            </add>
            <add name="CMS" />
        </protectedModules>
        <publicModules rootPath="~/public/" autoDiscovery="Minimal" />
    </episerver.shell>

Print the Global Navigation menu on page

ASP.NET MVC

<%@ Import Namespace="EPiServer.Shell.Extensions" %>

<%= Html.GlobalMenu()%>

WebForms

<%@ Register TagPrefix="sc" Assembly="EPiServer.Shell"
              Namespace="EPiServer.Shell.Web.UI.WebControls" %>

<sc:ShellMenu runat="server" SelectionPath="/global/sample" Area="Sample" />

Current selection

The menu tracks the current menu item automatically if the menu item is an route menu item. But it also supports that the user sets the selection path if they need to.

It is possible to set the selection directly from the Controller Action if the default MasterPage is used or it can be done from the view directly.

Controller Action
this.ViewData[“SiteCenterMenuPath”] = “/global/sample”
View
<%@ Import Namespace="EPiServer.Shell.Extensions" %>
<%= Html.GlobalMenu("/global/sample")%>

Way 1: Change web.config <navigation>

  • Easiest way to do
  • Suitable to config section, dropdown menu
  • With Link menu item, we can provide fixed URL only
<episerver.shell>
  <navigation>
    <add menuItemType="Link" menuPath="/global/sample"
         alignment="Left" sortIndex="1"
         target="_self" text="Sample"
        url="http://localhost:81/" /> 
  </navigation>
</episerver.shell>
  • Properties of navigation item
    • Link is Url, like you click on EPiServer logo, or click on ViewMode (eye icon)
    • Section is like you click on CMS
    • DropDown is like you click on help (question mark)
    • Text and MenuPath are mandatory attributes
    • Link and DropDown can be nested under Section

Way 2: Using MenuItemAttribute

  • Create webform or MVC Controller
  • It is possible to decorate MVC Controllers and WebForm code-behind classes with an attribute to make them appear in the menu
  • Easy way, but not flexible (security role, css
WebForm Attributes

[MenuItem(MenuPaths.Global + "/sample",

Text = "Sample",

TextResourceKey = "/sample",

Url = "Edit/Default.aspx"

)]

public partial class DefaultPage : SystemPageBase

{

}

MVC Attributes

public class DashboardController : Controller

{

[MenuItem(MenuPaths.Global + "/sample",

Text = "Sample"

)]

public ActionResult Index()

{

}

}

Way 3: Using MenuProvider

  • A menu provider returns an enumeration of menu items
  • EPiServer will attach the return menu items to the Global Navigation
  • Items of MenuProvider live in peace with configured from navigation (in web.config) and reflection attribute.
[Export(typeof(IMenuProvider))]
    public class SampleMenuProvider : IMenuProvider
    {   
        public IEnumerable<MenuItem> GetMenuItems()
        {
            UrlMenuItem item = new UrlMenuItem("Sample", MenuPaths.Global + "/sample", "/Default.aspx");
            item.SortIndex = 1;
            item.Alignment = MenuItemAlignment.Left;
            item.IsStyled = true;
            item.IsAvailable = request => PrincipalInfo.HasAdminAccess;
 
            return new MenuItem[] { item };
        }
    }
Feb 01, 2010

Comments

Sep 21, 2010 10:33 AM

Very good post

Greg B
Greg B Sep 21, 2010 10:33 AM

How can you maintain the CMS UI across any custom items you define as a menu item?

Jan 26, 2011 04:58 PM

I also wonder if/how it is possible to still remain in the CMS UI while having custom site/pages shown. I know Commerce does just that (browsing commerce site while having the same look as CMS UI), but how?

Please login to comment.
Latest blogs
New Series: Building a .NET Core headless site on Optimizely Graph and SaaS CMS

Welcome to this new multi-post series where you can follow along as I indulge in yet another crazy experiment: Can we make our beloved Alloy site r...

Allan Thraen | Jun 14, 2024 | Syndicated blog

Inspect In Index is finally back

EPiCode.InspectInIndex was released 9 years ago . The Search and Navigation addon is now finally upgraded to support Optimizely CMS 12....

Haakon Peder Haugsten | Jun 14, 2024

Change the IP HTTP Header used for geo-lookup in Application Insights

.

Johan Kronberg | Jun 10, 2024 | Syndicated blog

Copying property values

In this article I’d like to show simple Edit Mode extension for copying property values to other language versions. In one of my previous blogposts...

Grzegorz Wiecheć | Jun 8, 2024 | Syndicated blog

Auto-translate with OpenAI GPT-4o in Optimizely CMS

Improvements for Episerver.Labs.LanguageManager! It's now possible to auto-translate both a page and its children at the same time! Additionally, m...

Tomas Hensrud Gulla | Jun 7, 2024 | Syndicated blog

Upgrade To Optimizely CMS 12 Issue: List item fields have become Required

There are many funny details to be aware of when upgrading from Episerver CMS 11 to Optimizely CMS 12. One of them that might feel a bit confusing ...

Allan Thraen | Jun 7, 2024 | Syndicated blog