Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • ridi 71 posts 103 karma points
    Jun 16, 2010 @ 10:09

    creating an expandable tree using XSLT

    Dear All,

    i want to create an expandable tree that mimics navigation in umbraco backend content. I installed the cog navigation but have no luck to see that the tree is always expanded and shown in menu. Is there anyway for me to display tree based navigation structure by using XSLT.

    Have try using user control approach and Document classes but have no luck to see it works in my case...


    any help will be apreciated :)


  • Dan 1266 posts 3836 karma points c-trib
    Jun 16, 2010 @ 10:16

    Just use XSLT to ouput the full nested list of navigation (perhaps the 'sitemap' XSLT template might be a good place to start) then use javascript to format it into a tree-type menu.  I'ved used this one, which is based on jQuery with success in the past:

  • ridi 71 posts 103 karma points
    Jun 16, 2010 @ 10:28

    Dear Dan,

    any sample integration between two of them ? (i mean xslt and js)



  • Bo Petersen 28 posts 61 karma points
    Oct 26, 2010 @ 13:15
    Bo Petersen



    I have this working XSLT for the new schema

    i apply some jquery afterwards.

    this version is expanded from the current page.

    all you need to do is remove th <xsl:if test="count(./*[string(umbracoNaviHide) != '1']) &gt; 0"> part of the xslt.


    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
      xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets">

    <xsl:output method="xml" omit-xml-declaration="yes" />

    <xsl:param name="currentPage"/>

    <!-- Input the documenttype you want here -->
    <!-- Typically '1' for topnavigtaion and '2' for 2nd level -->
    <!-- Use div elements around this macro combined with css -->
    <!-- for styling the navigation -->
    <xsl:variable name="level" select="1"/>

    <xsl:template match="/">
      <xsl:apply-templates select="$currentPage/ancestor-or-self::* [@isDoc and @level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']"/>
          <xsl:template match="*">

    <xsl:if test="umbraco.library:HasAccess(@id, @path) = true()">
            <a title="{nodeName}">
              <xsl:attribute name="href">
                      <xsl:value-of select="umbraco.library:NiceUrl(@id)" />
              <xsl:attribute name="class">level<xsl:value-of select="@level" />
                <xsl:if test="position() = 1"><xsl:text> first</xsl:text></xsl:if>
                <xsl:if test="position() = last()"><xsl:text> </xsl:text>last</xsl:if>
                <xsl:if test="$currentPage/ancestor::*/@id = current()/@id"><xsl:text> </xsl:text>expanded</xsl:if>
                <xsl:if test="@id = $currentPage/@id"><xsl:text> </xsl:text>current</xsl:if>
                <xsl:if test="count(./*[string(umbracoNaviHide) != '1']) &gt; 0"><xsl:text> </xsl:text>parent</xsl:if>
                <xsl:value-of select="umbraco.library:Item(@id, 'pageName')"/> <xsl:if test="count(./*[@isDoc]) &gt; 0"> <span class="subcount"> (<xsl:value-of select="count(./*[@isDoc])" />)</span></xsl:if>
            <xsl:if test="count(./*[string(umbracoNaviHide) != '1']) &gt; 0">
              <xsl:if test="$currentPage/ancestor-or-self::*/@id = current()/@id">
                  <xsl:apply-templates select="./*[@isDoc and string(umbracoNaviHide) != '1']" />


  • ridi 71 posts 103 karma points
    Nov 18, 2010 @ 13:39

    Thanks petersen look great!

  • Bo Petersen 28 posts 61 karma points
    Nov 21, 2010 @ 18:11
    Bo Petersen

    You're very welcome. :-)

  • Dwayne A 97 posts 117 karma points
    Apr 01, 2011 @ 14:36
    Dwayne A
  • Matthew Jarvis 129 posts 129 karma points
    Sep 21, 2011 @ 11:07
    Matthew Jarvis

    Hey guys, have implemented the above menu and its great just what i needed.  Only thing i hoped to solve is:-

    • On my top level nodes i get in brackets the number of links underneath e.g SOME MENU ITEM(12) - how would I remove this number so it no longer appears


    • Want to have a hyphen '-' appear before each sub menu to e.g:- Where would I need to place this '-'


          -Some MENU Item


  • Bo Petersen 28 posts 61 karma points
    Sep 22, 2011 @ 20:07
    Bo Petersen

    Hey Matthew.

    Find this line 

    <xsl:if test="count(./*[@isDoc]) &gt; 0"<span class="subcount"(<xsl:value-ofselect="count(./*[@isDoc])" />)</span></xsl:if>

    delete it or do what i do .

    .subcount {display:none;}
    to your css file. 

    about the hypen

    locate this line and add the hyphen prefixed to this

     <xsl:value-of select="umbraco.library:Item(@id, 'pageName')"/>


  • Matthew Jarvis 129 posts 129 karma points
    Sep 26, 2011 @ 11:20
    Matthew Jarvis

    Thanks for your reply Bo,  I had self worked out how to remove the counter amount of pages ;-)

    With the hyphen, adding it to the line suggested means that all top level nodes also have a hyphen appear.  I hoped to have a hyphen appear only on the sub nodes.  So far instance i have 6 top level nodes, by selecting one of these 6 top level nodes, the menu will then show the sub nodes underneath each with a hyphen.  Any further guidance would be much appreciated.

  • Matthew Jarvis 129 posts 129 karma points
    Sep 26, 2011 @ 12:37
    Matthew Jarvis

    The code below is the HTML that was created by a designer:-

        <li><a href="#">SOMEPAGENAME1</a></li>
         <li><a href="#">SOMEPAGENAME2</a></li>
         <li class="current"><a href="#">SOMEPAGENAME3</a>
              <li class="current"><a href="#">- SOMEPAGENAME4</a></li>
              <li ><a href="#">- SOMEPAGENAME5</a></li>
              <li ><a href="#">- SOMEPAGENAME6</a></li>

    Using the above selecting SOMEPAGENAME4 is the current page being viewed this results in <li class="current"> kikcing in due to it being the current page together with <li class="current"> also in effect on SOMEPAGENAME4 top level node (SOMEPAGENAME3)



Please Sign in or register to post replies

Write your reply to: