--- title: Navigate menus and listing slug: cms-11/dev-docs/aQCX-navigating-menus-and-listing docTags: createdAt: 2026-07-22T19:45:16.749Z --- :::hint{type="warning"} **Important** This topic applies to Web Forms. ::: You can use the navigation menu and listing controls in Optimizely Content Management System (CMS) for many purposes, such as creating listings and website navigation through a top menu and submenus. The CMS menu and listing controls have access to the CMS data source controls, making them an important part of the website. ## CMS lists collect and display data Many attributes and functions are available to the web control, which you access in the code-behind by typing in the control ID. Intellisense displays a list of the control's attributes and methods for selection. ### Collections of pages The CMS menu and listing controls can handle a collection of pages contained in your CMS site. They can obtain this collection in different ways by setting the following attributes for the listing control: - `PageLink` – Provides a page reference to a page. The children of that page become the collection used. - `PageLinkProperty` – Provides the name of a property that contains a page reference, which is used as PageLink. This is a commonly used method because it lets editors define the page reference for the property. - `DataSource` – Lets the control data bind to the collection retrieved by another control, which is useful when one control is most suited to retrieve the correct collection, while another may be more appropriate to render the results. Set the `DataSource` value to the id of the other control, using an inline data binding expression: `` :::hint{type="info"} **Note** You can combine `DataSource` with one of the two attributes above, leading to a merged collection from two sources. However, for CMS's data source controls, you should pass the data is by setting the `DataSourceID` attribute, rather than the inline syntax described above. ::: ### Templates controls CMS control lists are ASP.NET *Templated Controls*. The output generated by CMS and ASP.NET web controls is performed and controlled by templates. The templates let you control the rendering of data from the control. The templates provide various options, and there is a certain way to use them. A key aspect of using the templates is specifying the appearance of the data bound to the control. In the following code example, the `PageLink` property of the `MenuList` control is assigned to the site’s start page, which is the root page to read data from. To render the contents of `PageLink`, insert the `PageLink` property between the `` and `` tags. ```xml ``` ## Menu and listing controls The CMS “all-in-one” listing controls are implemented according to the .NET concept of templated controls; see the [ASP.NET Web Server Controls Templates](http://msdn.microsoft.com/en-us/library/h59db326.aspx). The rendering of data from CMS list and menu controls occurs through the web controls’ templates. For information about deciding which template to use, refer to the relevant web control descriptions in this topic. When you build CMS solutions, use the `MenuList` and `PageList` web controls to create navigation on a main and sublevel. Use the `NewsList` control when you need to render different markup for the first pages in a list of pages. As each control is designed for a certain type of list, familiarize yourself with all controls before you start developing. You can use the following basic approaches when developing with the CMS listing controls types of lists: - Use specific “all-in-one” CMS listing controls. One listing control contains the data from another listing control. - Use Optimizely data source controls in the CMS listing control. CMS uses the following menu and listing web controls: - [EPiServer \:PageList](docId\:aQCXjwqaLcxLfz5D8NSTL) – Renders a page list; extends [PageList](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/6D4B0D7E) with templates. - [EPiServer \:MenuList](docId\:aQCXjwqaLcxLfz5D8NSTL) – Renders a menu list of top level items; useful for navigations with a top level menu and clickable sublevels. - [EPiServer \:NewsList](docId\:aQCXjwqaLcxLfz5D8NSTL) – Renders a news list, with a specialized template for top-level news. - [EPiServer \:PageTree](docId\:aQCXjwqaLcxLfz5D8NSTL) – Renders page trees; extends [PageTreeData](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/BD9814A6) with templates. ### EPiServer\:PageList Use the [PageList](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/6D4B0D7E) control to list CMS pages. This is similar to other data controls, such as `asp.Repeater`. It has built-in features to use in certain scenarios, such as filtering data and adding paging to it. **Frequently used properties** | EPiServer\:PageList Properties | Description | | -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [MaxCount](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/FF07C2F1) | The number of **PageData** objects (Episerver pages) to list. | | [PageLink](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/AE797E65) | The root page to get children from. | | [PageLinkProperty](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/546C2052) | The page property, gets the children of that page. | | [PagesPerPagingItem](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/80B9DFC0) | When paging is enabled, how many **PageData** objects per page. | | [Paging](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/84628C54) | Controls whether paging is used. Set to **true** to enable paging. | | [PublishedStatus](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/457BFA10) | Takes a [PagePublishedStatus enum](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/5DF390BB). Default is **published**. | | [RequiredAccess](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/B486DF73) | Takes an [AccessLevel enum](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/5A9CAABB). Default is **read**. | | [SkipCount](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/2F03E4A6) | Skip the first x pages. Useful when doing something else with the first x number of pages. | | [SortBy](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/455B02C7) | Sort after an Episerver property. | | [SortDirection](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/400CE4F1) | Takes a [FilterSortDirection enum](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/852E889F) (remember to add **EPiServer.Filters**). | | [SortOrder](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/FBE64278) | Takes a [FilterSortOrder enum](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/53CBB59A). | **Frequently used templates** | EPiServer\:PageList Templates | Description | | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | | [FooterTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/5960946B) | Template for listing a footer. | | [HeaderTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/E9784845) | Template for listing a header. | | [ItemTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/2076B4BB) | The default template for pages. | | [PagingFooterTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/12B6DF45) | Footer template for the paging items. | | [PagingHeaderTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/3661C1EB) | Header template for the paging items. | ### EPiServer\:MenuList Use the [MenuList](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/5537420E) control to create the top-level menu when building website navigation. Start with the `MenuList` for the top-level menus, and use the [PageTree](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/66DC5076) control for the submenus. **Frequently used properties** | EPiServer\:MenuList Properties | Description | | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | [EnableVisibleInMenu](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/C4D749DD) | Show pages that have the **Show in menus** option cleared in edit view. | | [EvaluateHasChildren](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/5784AA02) | Set **PageLinkProperty** to automatically populate **PageLink** from a given property. | | [ExpandAll](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/71CFB095) | Expand all tree nodes. | | [ExpandNodeIfStartPage](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/E5BC85B2) | Set this property to automatically select a page when selecting the start page. | | [NumberOfLevels](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/2DE17239) | Set the number of levels to show in the tree. | | [RequiredAccess](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/283A40BB) | Set or get the level of access rights filtering that will be done. | | [PageLinkProperty](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/6EC2B97E) | Set **PageLinkProperty** to automatically populate **PageLink** from a given property. | | [ShowRootPage](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/BCCA6A0E) | Show the root page. | | [SortBy](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/82937043) | Gets or sets custom sorting on a property instead of using predefined sorting by setting **SortOrder**. | | [SortOrder](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/8EE901FC) | Predefined sort orders instead of using custom sorting by setting **SortBy**. | | [SortDirection](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/FEC7DEB9) | Direction for sorting listings specified by **SortBy**. | | [PageLink](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/9EA0C671) | The root page to read data from. | **Frequently used templates** | EPiServer\:MenuList Templates | Description | | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | | [FooterTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/13DA4643) | The default template for a footer. | | [HeaderTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/5D5F70FD) | The default template for a heading. | | [ItemTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/CFA6B3) | Template used for displaying items in the navigation bar. | | [SelectedTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/DEA2FD3B) | Template used for displaying selected items in the navigation bar. | | [SeparatorTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/4A3604D7) | The template used between pages. | ### EPiServer\:NewsList NewsList has special templates for the first four news pages and a default `NewsTemplate`. If you specify `NewsTemplate`, it is used as a fallback for the first four templates that were not set. If you defined all templates except `NewsTemplate`, you still see only four news pages (you only have definitions for the first four news pages). If you have defined four templates, but only have two news pages to display, only two news pages are displayed. The `NewsList` control sets `SortBy` to `PageStartPublish`, and `SortDirection` to `Descending` by default. See the `NewsList` class for information about its properties. **Frequently used properties** | EPiServer\:NewsList Properties | Description | | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [MaxCount](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/FF07C2F1) | The number of **PageData** objects (Episerver pages) to list. | | [PageLink](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/AE797E65) | The root page to get children from. | | [PageLinkProperty](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/546C2052) | The page property, gets the children of that page. | | [PagesPerPagingItem](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/80B9DFC0) | When paging is enabled, how many **PageData** objects per page. | | [Paging](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/84628C54) | Controls if paging is used. Set to **true** to enable paging. | | [PublishedStatus](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/457BFA10) | Takes a [PagePublishedStatus enum](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/5DF390BB). Default is published. | | [RequiredAccess](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/B486DF73) | Takes an [AccessLevel enum](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/5A9CAABB). Default is read. | | [SkipCount](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/2F03E4A6) | Skip the first x pages. Useful when doing something else with the first x number of pages. | | [SortBy](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/455B02C7) | Sort after an Episerver property. | | [SortDirection](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/400CE4F1) | Takes a [FilterSortDirection enum](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/852E889F) (remember to add EPiServer.Filters). | | [SortOrder](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/FBE64278) | Takes a [FilterSortOrder enum](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/53CBB59A). | **Frequently used templates** | EPiServer\:NewsList Templates | Description | | ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [FirstNewsTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/343FAA37) | The template for the first news item. | | [SecondNewsTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/5F4B9545) | The template for the second news item. | | [ThirdNewsTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/40E88A4) | The template for the third news item. | | [FourthNewsTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/BA8622F) | The template for the fourth news item. | | [HeaderTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/8957DEC5) | Default header template for news pages. | | [NewsTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/E869F729) | If you specify **NewsTemplate** it is used as fallback for the first four templates that have not been set. | | [PagingFooterTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/12B6DF45) | Footer template for the paging of news items. | | [PagingHeaderTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/3661C1EB) | Header template for the paging of news items. | | [TemplateControl](http://msdn2.microsoft.com/en-us/library/bek0k7ey) | Gets or sets a reference to the template that contains this control.
(Inherited from [Control](http://msdn2.microsoft.com/en-us/library/983zwx2h).) | | [TemplateSourceDirectory](http://msdn2.microsoft.com/en-us/library/18y98fcb) | Gets the virtual directory of the [Page](http://msdn2.microsoft.com/en-us/library/dfbt9et1) or [UserControl](http://msdn2.microsoft.com/en-us/library/cdhdhykx) that contains the current server control.
(Inherited from [Control](http://msdn2.microsoft.com/en-us/library/983zwx2h).) | | [FooterTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/4D932F7F) | Default template for pages. | ### EPiServer\:PageTree Use the [PageTree](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/66DC5076) control to develop more complex menus, such as site maps. **Frequently used properties** | EPiServer\:PageTree Properties | Description | | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | [EnableVisibleInMenu](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/C4D749DD) | Show pages that have the **Show in menus** option cleared in edit view. | | [EvaluateHasChildren](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/5784AA02) | Set **PageLinkProperty** to automatically populate **PageLink** from a given property. | | [ExpandAll](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/71CFB095) | Expand all tree nodes. | | [ExpandNodeIfStartPage](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/E5BC85B2) | Set this property to automatically select a page when on start page. | | [NumberOfLevels](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/2DE17239) | Set the number of levels to show in tree. | | [RequiredAccess](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/283A40BB) | Set or get the level of access rights filtering that will be done. | | [PageLinkProperty](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/6EC2B97E) | Set **PageLinkProperty** to automatically populate **PageLink** from a given property. | | [ShowRootPage](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/3CECEE6) | When rendering the root page as part of the tree, when data is data bound to another control that does the tree structure rendering. | | [SortBy](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/82937043) | Gets or sets custom sorting on a property instead of using predefined sorting by setting **SortOrder**. | | [SortOrder](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/8EE901FC) | Predefined sort orders instead of using custom sorting by setting **SortBy**. | | [SortDirection](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/FEC7DEB9) | Direction for sorting listings specified by **SortBy**. | | [PageLink](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/9EA0C671) | The root page to read data from. | **Frequently used templates** | EPiServer\:PageTree Templates | Description | | ------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | | [FooterTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/2CA1F3B7) | The default template for the footer. | | [HeaderTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/4CA248FD) | The default template for the heading. | | [ItemTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/7A2AFFC7) | Template used for displaying items in the navigation bar. | | [ExpandedItemTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/98BFEC74) | The default template for expanded pages. | | [ExpandedTopTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/F3498C06) | The template used between pages. | | [IndentTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/647CE39C) | The template for indent rendering. | | [SelectedExpandedItemTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/E86AA8C1) | The default template for selected and expanded pages. | | [SelectedExpandedTopTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/DAC881E3) | The default template for selected and expanded top level pages. | | [SelectedItemTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/1175C184) | The default template for selected pages. | | [TopTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/75BC3D89) | The default template for top level pages. | | [SelectedTopTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/596BEA36) | The default template for selected top level pages. | | [UnindentTemplate](/epiui/CMS/Content/documentation/Class-library,,66786/?epieditmode=False\&documentId=cms/10/21A60791) | The template for unindent rendering. |