Creating a hierarchal menu in EPiServer

By Johan Pettersson 1 November 2011 16:44

Lately I’ve seen different ways of creating a menu with correct and semantic html in EPiServer. The example in the EPiServer SDK is just soooo wrong from most perspectives. I think this is the best and simplest way:

<EPiServer:PageTree AutoBind="true" EvaluateHasChildren="True" PageLink="<%# MyTopMenu.OpenTopPage %>" ShowRootPage="false" runat="server">
	<IndentTemplate>
		<ul>
	</IndentTemplate>

	<ItemHeaderTemplate>
			<li
	</ItemHeaderTemplate>

	<ItemTemplate>
		<%# Container.HasChildren ? " class=\"has-children\"" : "" %>>
			<a href="<%# Container.CurrentPage.LinkURL %>"><EPiServer:Property PropertyName="PageName" runat="server" /></a>
	</ItemTemplate>

	<SelectedItemTemplate>
		<%# Container.HasChildren ? " class=\"has-children\"" : "" %>>
			<strong><EPiServer:Property PropertyName="PageName" runat="server" /></strong>
	</SelectedItemTemplate>

	<ItemFooterTemplate>
			</li>
	</ItemFooterTemplate>

	<UnIndentTemplate>
		</ul>
	</UnIndentTemplate>
</EPiServer:PageTree>

Notice how we don’t close the listitem in ItemHeaderTemplate. If you don’t want to evaluate if the page has children you can close it in the header template.