Important
This topic applies to Web Forms.
A top-level navigational menu enables the user to navigate around the website easily.
Create a main menu with `EPiServer:MenuList
` as follows:
In edit view, add some pages under the website’s start page, such as: News, Documents, Examples and Events. When the menu is complete, you can navigate to and from these pages.
In _web.config_, set the variable `
pageStartId
` to the website’s start page ID. In the menu list, display each page’s name as a link to that page; use the built-in `PageLink
` property of the current page.Add a new Optimizely Content Management System (CMS) web control to the project; `
MainMenu
` in this example.In the _MainMenu.ascx_ user control file, add the control with closing tags and give the control the ID value **Menu**.
The `
PageLink
` attribute is set in the control’s code-behind file. Set the PageLink attribute and the control ID, and see the code example in this topic.Add an item template **\<ItemTemplate>** around the CMS `
PageLink
` property. These recur 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.Pass in the correct CSS class to get the right look and feel (`
CssClass="NormalLink"
`), by setting the `CssClass
` attribute on the `Property
` control.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 which pages it will display. In the code-behind file set the control attribute `Menu.PageLink
` to the `PageReference.StartPage
` property. See the code example in this topic.Use data binding to access the property and use the retrieved information as part of the loading of a control. (Data binding is a .NET concept and is documented in the Microsoft .NET help files.) You must explicitly data vind the menu list control by calling its `
DataBind()
` method, by placing the example code (in this topic) in the `Page\_Load
` event in the code-behind file (where menu is the **ID** of your `MenuList
` web control). The menu should be functional now.ÂBrowse to the website’s start page and verify that the top menu accurately displays the names of the pages in the top-level of the website structure. Click the links in the menu to verify that the navigation is working.
**MenuList code example markup**
**MenuList code example code behind**