Adding different CSS classes when using the EPiServer PageTree control

I am using the EpiServer:PageTree control to generate a nested <ul><li> list in the format below.

However I am also using a dropdown menu system called UDM which requires that the class and id “udm” are on the first <ul> tag.

The container object of the PageTree controller exposes the Indent property that we can use for this. Below is a simple example of how to add a CSS class to the first ul in your list (code is based on SubMenu.ascx from the EPiServer Public Templates package).

Container.Indent works nicely for nested levelled navigation – but any suggestions if you wanted to change the style using a similar method within the ItemTemplate to change the style on the first and last items?

Here’s the code used, and basically I expose the ‘PagePeerOrder’ property from the CurrentPage (the one that you can set in the EPiSERVER Editor tool in the Advanced tab for the page), and use this to check whether the page is my first page (PagePeerOrder set to 100 the same as EPiSERVER does with the first page by default) or my last page (with PagePeerOrder set to 999 so that it will always be the last page).