Simple breadcrumb using the PageSiteMapProvider

A pretty common thing to implement on a web site is a breadcrumb and with EPiServers PageSiteMapProvider it's an easy task.

In this tutorial I assume you have a clean install of EPiServer CMS 5.

The first thing we need to do is enable the PageSiteMapProvider in our web.config by adding the following xml.

<siteMap defaultProvider="PageSiteMap">
  <providers>
    <add name="PageSiteMap" type="EPiServer.PageSiteMapProvider, EPiServer" />
  </providers>
</siteMap

If we were lazy we could use the the asp:SiteMapPath and call it a day and the result would be OK but i'm a fan of clean HTML and therefore I decide we make a custom control that renders exactly what we want.

So let's start by creating a new class named e. g. Path.

public class Path : Control {
    protected override void CreateChildControls() {
        if (SiteMap.CurrentNode == null)
            return;
        PrependText(SiteMap.CurrentNode);
        PageSiteMapNode parent = SiteMap.CurrentNode.ParentNode as PageSiteMapNode;
        while (parent != null && parent != SiteMap.RootNode && parent.CurrentPage.PageLink != PageReference.RootPage) {
            Controls.AddAt(0, new LiteralControl(" / "));
            PrependAnchor(parent);
            parent = parent.ParentNode as PageSiteMapNode;
        }
        base.CreateChildControls();
    }
    public virtual void PrependText(SiteMapNode node) {
        Controls.AddAt(0, new LiteralControl(HttpUtility.HtmlEncode(node.Title)));
    }
    public virtual void PrependAnchor(SiteMapNode node) {
        HtmlAnchor anchor = new HtmlAnchor { HRef = node.Url, InnerText = node.Title };
        Controls.AddAt(0, anchor);
    }
}

For my simple example i'm quite satisfied and ready to test my new breadcrumb control. To do that we just need to add our newly created Path to our page like this.

<Kloojed:Path runat="server">

We should now have a clean breadcrumb with no extra markup generated from the included PageSiteMapProvider.