Try our conversational search powered by Generative AI!

Björn Olsson
Oct 8, 2011
(4 votes)

Creating a global navigation item plug-in, with EPiServer “look and feel”

I needed to create a global navigation item for a plug-in in my current project, beside the Visitor Groups item.


I also wanted my plug-in to have the same look and feel as the other plug-ins/tools in edit/admin-mode. And my third wish, was as always, to implement this with as little effort as possible. I ended up doing the following steps:

1. Create a new Web Form named MyPlugin.aspx in a folder named Plugins.

2. Add the following code to the Web Form. This code will resolve and set the path to the same MasterPage used by EPiServer CMS, which saves us a lot of time, since it already contains all the necessary style sheets and javascripts.

namespace EPiServer.Plugins
    public partial class MyPlugin : EPiServer.UI.SystemPageBase
        protected override void OnPreInit(EventArgs e)

            this.MasterPageFile = EPiServer.UriSupport.ResolveUrlFromUIBySettings("MasterPages/Frameworks/Framework.Master");

3. Add the following html to the Web Form. We’re using the content placeholder “FullRegion” which is defined in the MasterPage. The ShellMenu control will render the global navigation, and the SelectionPath property must be the same as we will be configuring in the next step. The remaining markup is a sample heading and table with EPiServer CMS style sheets applied.

<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="MyPlugin.aspx.cs" Inherits="EPiServer.Plugins.MyPlugin" %>
<%@ Register TagPrefix="EPiServerShell" Assembly="EPiServer.Shell" Namespace="EPiServer.Shell.Web.UI.WebControls" %>
<asp:Content ContentPlaceHolderID="FullRegion" runat="server">
        <EPiServerShell:ShellMenu runat="server" SelectionPath="/global/cms/myplugin" />

    <div class="epi-padding">
        <div class="epi-contentContainer epi-fullWidth">
            <div class="epi-contentArea">
                <h1 class="EP-prefix">My Plugin</h1>
                <p>This is my example plugin with EPiServer look and feel</p>
            <div class="epi-formArea">
                <table class="epi-default">
                            <th>Heading 1</th>
                            <th>Heading 2</th>
                            <td>Value 1</td>
                            <td>Value 2</td>

4. Configuration, locate the section in web.config, and add the navigation node as follows. This will make the new menu item appear in the global navigation under the CMS tab. The menuPath set here, must be the same as in the previous step, as I said.

    <add menuItemType="Link" menuPath="/global/cms/myplugin"
      text="My plugin"
      url="/Plugins/MyPlugin.aspx" />
  <publicModules rootPath="~/modules/" autoDiscovery="Minimal"/>
  <protectedModules rootPath="~/secure/UI/">
    <add name="Shell"/>
    <add name="CMS"/>

Compile and run your project, a new global menu item is now available, and looks very dandy indeed:


5. Security, protect your plugin from unauthorized users by adding the following nodes to web.config

<location path="Plugins">
      <allow roles="WebEditors, WebAdmins, Administrators"/>
      <deny users="*"/>

And there you go!

There is also an existing blog post regarding this, which covers the very basics, and some alternative ways to register your custom menu item.

Happy coding!

Oct 08, 2011


tompipe Oct 10, 2011 10:47 AM

Hi Björn,

Nice clear post.

An alternative to messing with the in web.config is to decorate a class with the MenuProvider attribute, and ensure that class inherits from IMenuProvider.

Within the GetMenuItems method, you can return a list of MenuItems to populate your menu. e.g

public class MyMenuProvider
public IEnumerable GetMenuItems()
return new List
new SectionMenuItem("My Plugin Section", "/global/cms/myplugin"),
new UrlMenuItem("My Plugin Item", "/global/cms/myplugin/item", "/Plugins/MyPlugin.aspx")

The SectionMenuItem and UrlMenuItem have various options to configure permissions and styling etc.

The relevant documentation is in the EPiServer.Shell.Navigation namespace,

Björn Olsson
Björn Olsson Oct 10, 2011 10:53 AM

Yes, this previous blog post covers that, as i mentioned: :)

Please login to comment.
Latest blogs
Migrate Catalog content properties

A colleague asked me yesterday – how do we migrate properties of catalog content. There is, unfortunately, no official way to do it. There are...

Quan Mai | Feb 20, 2024 | Syndicated blog

Adjust log levels in Optimizely DXP

You may adjust the log levels for your site in Optimizely DXP yourself, but only for the Integration environment. Follow this step-by-step guide.

Tomas Hensrud Gulla | Feb 20, 2024 | Syndicated blog

Introducing Search & Navigation Dashboard for Resource Usage

We're excited to unveil the latest addition to the Search & Navigation suite: a dashboard designed to proactively monitor your resource usage. It's...

Edvin Dackelid Johansson | Feb 20, 2024

Introducing Jhoose Security Module V2.0

Version V2.0 of the Jhoose Security module has been released and is available via the Optimizely nuget feed. This update not only squashes several...

Andrew Markham | Feb 19, 2024 | Syndicated blog