Dev GuideAPI ReferenceUser Guide
HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityDoc feedbackLog In
GitHubNuGetDev CommunityDoc feedback

Important

This topic applies to Web Forms.

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

  1. Add a new Optimizely Content Management System (CMS) web control to the project. In this example the control has been named `SubMenu`.

  2. In the _SubMenu.ascx_ file, add an CMS PageTree control `EPiServer:PageTree`. The control ID value was named `SubMenu` in this example.

  3. Set the `ShowRootPage` attribute to **true** to display the root page at the top of the page tree.

  4. 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) and occurs in the code-behind `OnLoad` function.

  5. In the `PageTree` list, display each page’s name as a link to that page; use the `PageLink` property of the current page.

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

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

    
  8. 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.
  9. Enhance the appearance of the control by adding more templates.
  10. In the code-behind for `SubMenu`, you need to establish which page’s subpages shall be listed as a page tree. The following code declares a private `MenuList`, and writes a get/set function that gets and/or sets the data source for this control.  
    
  11. In the master page’s `OnLoad` function, assign the values for the MainMenu control to the `SubMenu`.
    
<!----->
  1. In the master page, register the `SubMenu` control on the page. Add the `SubMenu` control in the appropriate location in the master page.
The submenu (and main menu) should be complete and working now. 
  2. 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).
  3. Verify that the navigation is working by clicking on the links.
**SubMenu code example markup**

**SubMenu code example code-behind**