Creating a tree like left menu in Sitecore using XSLT

This is one of my oldest tricks in my book. The tree-like left menu is used for almost any website I do, and will work like on this site (example site is not developed by me nor by Pentia). This image is from a website using the menu:

Sample Menu

Sample Menu

The XSLT renders a multilevel left menu, usually placed on pages on websites utilizing a sectional top menu. The menu will fold out any subitems below the current page, and will display the entire tree structure from the current page and upwards to the sectional page that the left menu is placed under.

In this simplified example I use pages with the menu title placed in the field Menu_Title, and I use a checkbox called Show_In_Menu to hide items that is not to be shown in the left menu.

The left menu is initialized with the current section page that will act as the root item for the menu. If you use the home page as your section item it will render the complete web site.

<xsl:template match="*" mode="main">
  <!-- Get the root item -->
  <xsl:variable name="section" select="ancestor-or-self::item&#91;@id = $home/item/@id&#93;"/>
  <!-- Render the menu from the root item and downwards -->
  <xsl:call-template name="renderMenu">
    <xsl:with-param name="root" select="$section"/>
    <xsl:with-param name="level" select="0"/>
    <xsl:with-param name="items" select="$section/item&#91;sc:fld('Show_In_Menu',.) = '1'&#93;"/>

Parameter root identifies the root item of the menu. Level is used for styling the menu (if you use different styles for the different levels). Items is a list of all items below the root item the must be rendered in the menu. In this example this includes all items where the field Show_In_Menu is checked.

The menu is rendered recursively by letting the renderMenu template call itself for each level it has to render.

<xsl:template name="renderMenu">
  <xsl:param name="root"/>
  <xsl:param name="level"/>
  <xsl:param name="items"/>

  <xsl:if test="$items">
<ul class="level{$level}">
      <xsl:for-each select="$items">
        <xsl:variable name="subItems" select="item&#91;sc:fld('Show_In_Menu',.) = '1'&#93;"/>
          <!-- Apply CSS to the link -->
          <xsl:variable name="selectedClass">
            <!-- Item has children -->
            <xsl:if test="$subItems">children</xsl:if>
            <!-- Item is open (one of it's children is the current page -->
            <xsl:if test="$subItems and @id = $selectedItem/ancestor-or-self::item/@id"> open</xsl:if>
            <!-- Item is the current page -->
            <xsl:if test="@id = $selectedItem/@id"> selected</xsl:if>

          <!-- Write link including generated CSS tag -->
          <a href="{sc:path(.)}" class="{$selectedClass}">
            <sc:text field="Menu_Title"/>           

          <!-- Go further down the tree and render children -->
          <xsl:if test="@id = $selectedItem/ancestor-or-self::item/@id">
            <xsl:call-template name="renderMenu">
              <xsl:with-param name="root" select="."/>
              <xsl:with-param name="level" select="$level+1"/>
              <xsl:with-param name="items" select="$subItems"/>

The template renders all items of the first level, but second, third and later levesl are only rendered if the current page is found in that branch. This gives the menu its fold-out like behaviour.
Please note how I style the menu link. The variable selectedClass is set with different content depending of the properties of the link to render. The example uses the three most commonly used styles applied: When the link has children, when the link has children, and the current page is one of these children and when the link is the current page.
Yes, it’s that simple to do an advanced left menu in Sitecore. I have also done the same menu for Umbraco, but that’s a different matter.

About briancaos

Developer at Pentia A/S since 2003. Have developed Web Applications using Sitecore Since Sitecore 4.1.
This entry was posted in Sitecore 5, Sitecore 6 and tagged , , . Bookmark the permalink.

6 Responses to Creating a tree like left menu in Sitecore using XSLT

  1. Eric says:

    Where did the variable $selectedItem come from and what does it look like?

  2. briancaos says:

    $selectedItem is the current item (current page). In Sitecore, $selectedItem equals the standard variable $sc_currentitem.

    I use the $selectedItem for styling purposes only:
    If my current item is in a sub-level of the menu, I would like the parent to be styled with the class name “open”. This class could for example be an arrow pointing downwards.
    Also, I would like to render the current item with the class name “selected”. This could for example make the text bold, or colored diffrently from the other items.

  3. Will says:

    hi Brian,

    I am trying to implement this menu but it is rejecting the xsl. If I remove all of the lines with @id it no longer rejects, but I need that to test. I am not sure what those lines are messing up.

  4. Pingback: Creating a tree like left menu in Sitecore using UserControls and C# « Brian Pedersen’s Sitecore and .NET Blog

  5. Lello says:

    Hi Brian,

    I’d like to add a filter to my section menu.xslt everything is working fine but i will have to categorized by three category. would you please advice.

  6. Lello says:


    Why don’t you advice on how to do a filter in Sitecore coding – XSLT ?? It has to be something simple that I’m missing!!!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s