Umbraco User's Guide

GENERATING WEBSITE NAVIGATION MENUS

Umbraco ships with a whole list of templates for generating lists of nodes for navigation, breadcrumbs, and other usage. This section provides some additional examples of how to work with XSLT and Razor to generate menus from your content structure. Razor is a view engine and is new in .NET 4.0. Razor allows you to access dynamic objects and display their associated data structures and values in the view (WebForm or other standard ASP.NET template). A common occurrence in websites is to have a multi-level top navigation with second level pages listed in dropdown menus. Listing 9-2 shows you how to do this.

Because Umbraco renders exactly what you tell it to render, the output from Listing 9-2 can easily be styled using CSS and JavaScript to create an engaging and functional menu.

LISTING 9-2: TwoTierTopNav.xslt

<?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” ...