🚧

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 the creation of 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

There are many attributes and functions 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:

  Text

  

📘

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 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 **\<ItemTemplate>** and **\</ItemTemplate>** tags.

## 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](🔗). 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 Episerver data source controls in the CMS listing control.

CMS uses the following menu and listing web controls:

• [EPiServer:PageList](🔗). Renders a page list; extends [PageList](🔗) with templates.

• [EPiServer:MenuList](🔗). Renders a menu list of top level items; useful for navigations with a top level menu and clickable sublevels.

• [EPiServer:NewsList](🔗). Renders a news list, with a specialized template for top-level news.

• [EPiServer:PageTree](🔗). Renders page trees; extends [PageTreeData](🔗) with templates.

### EPiServer:PageList

Use the [PageList](🔗) 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**

**Frequently used templates**

### EPiServer:MenuList

Use the [MenuList](🔗) control to create the top level menu when building website navigation. Start with the `MenuList` for the top level menus, and use the [PageTree](🔗) control for the submenus.

**Frequently used properties**

**Frequently used templates**

### EPiServer:NewsList

NewsList has special templates for the first four news pages and a default `NewsTemplate`. If you specify `NewsTemplate`, it is used as 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**

**Frequently used templates**

### EPiServer:PageTree

Use the [PageTree](🔗) control to develop more complex menus, such as site maps.

**Frequently used properties**

**Frequently used templates**