Simple Umbraco Footer Navigation

Wednesday, October 21, 2009

From building other sites, something which has become quite popular / important are having a footer navigations.  Whether it be for architecture, SEO or usability from my experience its something that clients/users want on the site, and the ability to choose which pages appear there. 

Here’s a very simple little bit of XSLT which will let you do just that, all you need to do is add the following property to your DocType you want users to be able to put in the footer.  [more]

For example I have CWS2 installed, and for the Textpage & Textpage (Two Col) DocType’s set with this property

footer-property

Now you have added the ‘ShowInFooter’ property to the DocTypes, we just need to create the XSLT file (With matching Macro) called ‘FooterNav’ and choose clean

macro

Simply delete all the XSLT and replace it with the XSLT in the below and save it

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxml="urn:schemas-microsoft-com:xslt"
  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"/>

<xsl:template match="/">
<ul>
        <xsl:for-each select="$currentPage/ancestor-or-self::node/descendant-or-self::node/node [string(data[@alias='ShowInFooter']) = '1']">
                <li>                    
                    <a href="{umbraco.library:NiceUrl(@id)}">
                        <xsl:value-of select="@nodeName" />
                    </a>
                </li>
            </xsl:for-each>
</ul>
</xsl:template>

</xsl:stylesheet>

Add your footer macro in your HTML where you need the footer nav to appear

inline-code

All you need to do now is ‘tick’ the box if you want the page to appear in the footer, or leave it unchecked – That's it!

lastbit

This entry was written by Lee, posted on Wednesday, October 21, 2009 Bookmark the permalink. Follow any comments here with the RSS feed for this post. You can post a comment.

2 comments for “Simple Umbraco Footer Navigation”

  1. Gravatar of TimTim
    Posted Thursday, October 22, 2009 at 10:33:18 AM

    nice idea! you could also have a footer doctype with a single ultimate picker which points at the root of your site structure, which would allow you to pick and choose which items you want in your footer. Easier to administer moving forward no? rather than to have to go into each document and check a checkbox for each.

  2. Gravatar of LeeLee
    Posted Thursday, October 22, 2009 at 10:41:07 AM

    Hi Tim - Thanks for commenting, and you are right thats also a good idea :) I went with this option as people will be using the umbracoNaviHide option in CWS so made sense (To me anyway lol) to add the footer option just under it.

Post a comment