Home
Atom Feed

Recursive navigation macro for Umbraco 5

This is a more advanced macro than the simple one I posted a few weeks ago.

The macro I will show you now even has the potential to create a tree view navigation for your whole site! :-)

NOTE: This code assumes that you have a property with the alias "umbracoNaviHide" of type "True/false" on your webpages.

Log in to your Umbraco 5 backend and go to the "Developer" section. Right click "Macro Partials", and click "Create".
Name your macro "Navigation".

Add the following macro parameters:

Then paste the following into the macro editor:

@inherits PartialViewMacroPage
@using Umbraco.Cms.Web
@using Umbraco.Cms.Web.Macros
@using Umbraco.Framework

@functions {
    public string Source { get; set; }
    public int Depth { get; set; }
}

@* Recursive function for rendering child nodes for the specified node *@
@helper RenderChildNodes(string parentId) {
    var parent = Umbraco.GetDynamicContentById(parentId);
    
    if(parent.Children.Any("umbracoNaviHide != true")) {
        <ul>
        @foreach(var child in parent.Children.Where("umbracoNaviHide != true")) {
            if(child.Level <= Depth) {
                <li>
                    <a href="@child.NiceUrl">@child.Name</a>
                    
                    @RenderChildNodes(child.Id.ToString())
                </li>
            }
        }
        </ul>
    }
}

@if(!string.IsNullOrEmpty(Source)) {
    @RenderChildNodes(Source)
}
else {
    @RenderChildNodes(DynamicModel.Id.ToString())
}

Go to the "Navigation" node under "Macro" and navigate to the "Macro Parameters" tab.
Add a new parameter named "Source" of type "Content Picker" and parameter named "Depth" of type "Integer".

Then just save the macro and add it to a template where you want the navigation to appear.

If you don't supply a Source id, it will use the current node as a starting point.
The Depth parameter decides how deep the macro will traverse while looking for nodes. (Normal values for top-level menus are 1 or 2)