Creating a main menu

Introduction

This document describes how to create a basic menu list of top level pages using the EPiServer MenuList Control. A top level navigational menu enables the user to navigate around the website easily.

Creating a main menu with EPiServer MenuList

Create a main menu with EPiServer MenuList as follows:

1. In Edit mode add some pages under the website’s Start Page, for example pages such as: News, Documents, Examples and Events. When the menu is complete we will be able to navigate to and from these pages.
2. In web.config set the variable pageStartId to the website’s Start Page ID. In the menu list we shall display each page’s name as a link to that page. The easiest way to achieve this is by using the built-in PageLink property of the current page.
3. Add a new EPiserver web control to the project. For instructions see the guide – How to Create a EPiServer Web Control Template. In this example we have named the control MainMenu.
4. In the MainMenu.ascx user control file, add the control with closing tags. We have given the control the ID value “Menu”.
5. The PageLink attribute will be set in the control’s code behind file. Set the PageLink attribute and the control ID, see the code example at the bottom of the page.
   
6. In the menu list we shall display each page’s name as a link to that page. The easiest way to achieve this is by using the built-in PageLink property of the current page
   
7. Add an item template <ItemTemplate> around the EPiServer PageLink property - these will be recurring for every page item that exists in the list – a page link is displayed for all the pages in the page hierarchy under the start page.
   
8. Pass in the correct CSS class to get the right look and feel (CssClass="NormalLink), by setting the CssClass attribute on the Property control.
   
9. The PageLink attribute of the EPiServer:MenuList control should be made dynamic instead of using a hardcoded ID to the start page of the website. A reference to the start page of the website is automatically available through the static StartPage property in the EPiServer.Core.PageReference class. This provides a context to the menu control, indicating what pages it will display. In the code-behind file set the control attribute Menu.PageLink to the PageReference.StartPage property - see the code example below.
   
10. To access the property and use the retrieved information as part of the loading of a control, we need to use data binding. (Data binding is a .NET concept and is documented in Microsoft .NET help files.) The menu list control has to be explicitly data bound by calling its DataBind() method, by placing the following code in the Page_Load event in the code-behind file(where menu is the ID of your MenuList Web control):
    
11. The menu should now be functional. Browse to the website’s start page and verify that the top menu now accurately displays the names of the pages in the top level of the website structure. Click on the links in the Menu to verify that the navigation is working.
    
    

<EPiServer:MenuList runat="server" id="Menu">
    <HeaderTemplate>
        <ul id="MainMenu">
    </HeaderTemplate>
    <ItemTemplate>
            <li class="unselected"><EPiServer:Property PropertyName="PageLink" runat="server" /></li>
    </ItemTemplate>
    <SelectedTemplate>
            <li class="selected"><EPiServer:Property runat="server" PropertyName="PageLink" /></li>
    </SelectedTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</EPiServer:MenuList>

MenuList code example code behind:

public partial class MainMenu : UserControlBase
{
    protected override void OnLoad(System.EventArgs e)
    {
        base.OnLoad(e);
        Menu.PageLink = PageReference.StartPage;
        Menu.DataBind();
    }

    /// <summary>
    /// Gets or sets the MenuList for this control
    /// </summary>
    public MenuList MenuList
    {
        get { return Menu; }
        set { Menu = value; }
    }
}

See also

This Main Menu control menu is used by the SubMenu control.