Jacob Khan
Jan 3, 2013
  10041
(5 votes)

Menu Provider for EPiServer Top Navigation

There are lot of great blog posts regarding how to add something to the top level navigation in EPiServer.

http://www.dnasir.com/2012/05/15/episerver-cms-custom-top-menu-for-multiple-plugins/

http://world.episerver.com/Blogs/Dung-Le/Dates/2010/2/Create-Global-Navigation-in-EPiServer-CMS-6-RC1/

http://world.episerver.com/Documentation/Items/Tech-Notes/EPiServer-CMS-6/EPiServer-CMS-60/OnlineCenter-Developer-Documentation/

It is extremely flexible and powerful. One small thing that we often encounter is that we want to reuse the menu on the top and want to include the new script files and styles needed for CMS 7 when we create plugins.

Accomplishing this is extremely easy. First we need to add four import statements in our markup.

<%@ Import Namespace="EPiServer.Framework.Web.Resources" %>
<%@ Import Namespace="EPiServer.Framework.Web.Mvc.Html" %>
<%@ Import Namespace="EPiServer" %>

We also need to register our Menu User Control

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

In the head tag of our ASPX we need to add our styles

<asp:PlaceHolder ID="shellScripts" runat="server">
            <%=Page.ClientResources("Dojo", new[] 
{ ClientResourceType.Style })%> <%=Page.ClientResources("ShellCore")%> <%=Page.ClientResources("ShellWidgets")%> <%=Page.ClientResources("ShellCoreLightTheme")%> <%=Page.ClientResources("ShellWidgetsLightTheme")%> <%=Page.ClientResources("Navigation")%> </asp:PlaceHolder>

We also need to add our Menu to the page, after that we are done

 <div class="epi-globalNavigationContainer">
        <sc:ShellMenu ID="ShellMenu2" runat="server" SelectionPath="/global/fb/main" />
    </div>

I used a MenuProvider since I dont really like making web.config changes.

 [MenuProvider]
    public class MenuProvider : IMenuProvider
    {
        public IEnumerable<MenuItem> GetMenuItems()
        {
            SectionMenuItem sectionMenuItem = new SectionMenuItem("Facebook", "/global/fb");
            sectionMenuItem.IsAvailable = ((RequestContext request) => PrincipalInfo.Current.HasPathAccess(UriSupport.Combine("/Facebook", "")));
            SectionMenuItem sectionMenuItem2 = sectionMenuItem;
            UrlMenuItem urlMenuItem = new UrlMenuItem("Main", "/global/fb/main", "/modules/TopBarPlugin/MainMenuPlugin.aspx");
            urlMenuItem.IsAvailable = ((RequestContext request) => true);
            urlMenuItem.SortIndex = 100;
            UrlMenuItem urlMenuItem2 = urlMenuItem;
           
            return new MenuItem[]
            {
                sectionMenuItem2, 
                urlMenuItem2
            };
        }
    }

Screen Shot 2013-01-02 at 2.40.41 PM

I am attaching my files in case someone wants the entire code

Jan 03, 2013

Comments

Jan 4, 2013 11:51 AM

Nice article.

Andreas Ågren
Andreas Ågren Jan 4, 2013 08:01 PM

The import statements in the example in this post and in the downloadable code differs. The downloadable code is correct, because the ClientResources-extension method has been moved from namespace EPiServer.Shell.Navigation to EPiServer.Framework.Web.Mvc.Html.

Jan 5, 2013 12:10 AM

@Andreas, I changed it, thanks

Please login to comment.
Latest blogs
Copy Optimizely SaaS CMS Settings to ENV Format Via Bookmarklet

Do you work with multiple Optimizely SaaS CMS instances? Use a bookmarklet to automatically copy them to your clipboard, ready to paste into your e...

Daniel Isaacs | Dec 22, 2024 | Syndicated blog

Increase timeout for long running SQL queries using SQL addon

Learn how to increase the timeout for long running SQL queries using the SQL addon.

Tomas Hensrud Gulla | Dec 20, 2024 | Syndicated blog

Overriding the help text for the Name property in Optimizely CMS

I recently received a question about how to override the Help text for the built-in Name property in Optimizely CMS, so I decided to document my...

Tomas Hensrud Gulla | Dec 20, 2024 | Syndicated blog

Resize Images on the Fly with Optimizely DXP's New CDN Feature

With the latest release, you can now resize images on demand using the Content Delivery Network (CDN). This means no more storing multiple versions...

Satata Satez | Dec 19, 2024

Simplify Optimizely CMS Configuration with JSON Schema

Optimizely CMS is a powerful and versatile platform for content management, offering extensive configuration options that allow developers to...

Hieu Nguyen | Dec 19, 2024

Useful Optimizely CMS Web Components

A list of useful Optimizely CMS components that can be used in add-ons.

Bartosz Sekula | Dec 18, 2024 | Syndicated blog