Create a submenu with EPiServer:PageTree

4 min

🚧 Important This topic applies to Web Forms.

Create a submenu with the EPiServer:PageTree control as follows:

Add an Optimizely Content Management System (CMS) web control to the project. Name the control SubMenu.

Add an CMS PageTree control EPiServer:PageTree in the SubMenu.ascx file. Name the control ID value SubMenu.

Set the ShowRootPage attribute to true to display the root page at the top of the page tree. It retrieves the context for the PageTree from the control’s page link attribute.

Set the MainMenu control attribute OpenTopPage (to get the open top page); it occurs in the code-behind OnLoad function.

{/**/}

Display each page’s name as a link to that page in the PageTree list; use the PageLink property of the current page.

Make the code in the templates dynamic, displaying the page names as links to the pages by using the CMS PageLink property.

Place <ItemTemplate> tags around the property, displaying each subpage’s name as a link.

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

To show 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.

In the code-behind for SubMenu, establish which page’s subpages to list as a page tree. The following code declares a private MenuList, and writes a get and set function that gets and sets the data source for this control.

private MenuList _menuList;

public MenuList MenuList {
  get {
    return _menuList;
  }
  set {
    _menuList = value;
  }
}

In the master page’s OnLoad function, assign the values for the MainMenu control to the SubMenu.

protected override void OnLoad(System.EventArgs e) {
  base.OnLoad(e);
  SubMenu.MenuList = MainMenu.MenuList;
}

In the master page, register the SubMenu control on the page. Add the SubMenu control in the appropriate location on the master page. The submenu (and main menu) should be complete and working now.

Build the solution and use your web browser to verify the links displayed in the top-level menu by clicking on them. The left-centered menu should display links to the pages below the selected team in the website structure. (Compare to the page tree displayed in edit mode).

Verify that the navigation is working by clicking on the links.

SubMenu code example markup

<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

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();
  }
}