How to Create a Sub Menu with the EPiServer PageTree control

Here we shall describe how the EPiServer control PageTree can be used to list a page’s subpages – we will name this control SubMenu.

  1. 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 SubMenu.
  2. In the SubMenu.ascx file, add a EPiServer PageTree control: <EPiServer:PageTree … >.  In this example we have given the control ID value "SubMenu".  Set the ShowRootPage attribute to true in order to display the root page at the top of the page tree.
  3. The context for the PageTree is retrieved from the control’s page link attribute. In this example it is set to the MainMenu control attribute OpenTopPage (gets the open top page) - carried out in the code behind OnLoad function.
  4. In the PageTree list we shall display each page's name as a link to that page. The easiest way to achieve this is by using the PageLink property of the current page. The code in the templates has to be made dynamic, displaying the page names as links to the pages. The easiest way to achieve this is by using the EPiServer PageLink property see the code example. Place <ItemTemplate> tags around the property, displaying each sub page's name as a link.
  5. In order to clearly denote to the user which page is being displayed, use the <SelectedItemTemplate> template. The Container object exposes relevant properties for each item in the list. Enhance the appearance of the control by adding more templates, see the code example below.
  6. In the code behind for SubMenu we need to establish which page's sub pages we shall list as a page tree.  In the code below we have declared a private MenuList written a get/set function which gets and/or sets the data source for this control.
  7. In the OnLoad function in the code behind In the master page we assign the values for the MainMenu control to the SubMenu.
    SubMenu.MenuList = MainMenu.MenuList;
  8. In the master page, register the SubMenu control on the page. Add the SubMenu control in the appropriate location in the master page
  9. The sub menu (and main menu) should now be complete and working. Build the solution and use your web browser to verify that the links displayed in the top level menu by clicking on them. The left centered menu should now display links to the pages below the selected team in the Web site structure (compare to the page tree displayed in the EPiServer Edit mode).
  10. Verify that the navigation is working by clicking on the links.
SubMenu Code Example Markup:
CopyC#
<EPiServer:PageTree ShowRootPage="false" runat="server" id="Menu">
    <IndentTemplate>
        <ul>
    </IndentTemplate>

    <ItemHeaderTemplate>
            <li>
    </ItemHeaderTemplate>

    <ItemTemplate>
                <EPiServer:Property PropertyName="PageLink" runat="server" />
    </ItemTemplate>

    <SelectedItemTemplate>
                <EPiServer:Property CssClass="selected" PropertyName="PageName" runat="server" />
    </SelectedItemTemplate>

    <ItemFooterTemplate>
            </li>
    </ItemFooterTemplate>

    <UnindentTemplate>
        </ul>
    </UnindentTemplate>
</EPiServer:PageTree>
SubMenu Code Example code behind:
CopyC#
public partial class SubMenu : UserControlBase
{
    private MenuList _menuList;

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

    protected override void OnLoad(System.EventArgs e)
    {
        base.OnLoad(e);

        if (MenuList == null)
        {
            return;
        }
        Menu.PageLink = MenuList.OpenTopPage;
        Menu.DataBind();
    }

}