Umbraco V5 Example - Navi

Navi.cshtml

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

@{ 
    //Maximum level you want to loop down to 
    var maxLevel = String.IsNullOrEmpty(Model.MacroParameters.maxLevel) ? 8 : Convert.ToInt32(Model.MacroParameters.maxLevel);

    //Get the current page
    var currentPage = DynamicModel;

    //Will walk up the tree to the last ancestor node aka RootNode
    var rootNode = currentPage.AncestorsOrSelf.Last();

    //Check if the rootNode is the currentPage (selected)
    var rootIsSelected = currentPage.Id == rootNode.Id;
        
    <nav id="top-nav">
        <ul class="level-@(rootNode.Level)">
            <li>
                @* Add CSS class selected if rootIsSelected *@
                <a href="@rootNode.Url" class="@(rootIsSelected ? "selected" : "")">@rootNode.Name</a>

                @* Display children on  rootNode *@
                @childPages(rootNode.Children, maxLevel)
            </li>
        </ul>
    </nav>
    
}


@helper childPages(dynamic pages, int endRenderLevel)
{
    //Check we have pages to loop through
    if (pages.Any())
    {
        //Get the navigation level
        var naviLevel = pages.First().Level;

        if (naviLevel <= endRenderLevel)
        {
        <ul class="level-@(naviLevel)">
            @foreach (var page in pages)
            {
                //Check the page is not hidden with umbracoNaviHide
                if (page.umbracoNaviHide != "True")
                {                
                    //Get the page ID in the loop as a HiveID
                    HiveId pageID = page.Id;

                    //Check if the current page or any of the ancestor pages contain the page ID and retrun a boolean
                    var isSelected = Model.CurrentPage.AllAncestorIdsOrSelf().Contains(pageID);
                    
                    <li>
                        @* Add CSS class selected if isSelected *@
                        <a href="@page.Url" class="@(isSelected ? "selected" : "")">
                            @page.Name
                        </a>

                        @* if the current page has any children *@
                        @if (page.Children.Any())
                        {
                            @childPages(page.Children, endRenderLevel);
                        }
                    </li>
                }
            }
        </ul>
        }
    }    
}

I really like this example. Just two things:

• To keep consistency in the naming conventions, can you capitalize Model.MacroParameters.MaxLevel?
• Same for NaviMarkup helper method

Thanks

Hey Jorge,
Yeh good idea, I am used to camelCase from the property aliases in Umbraco hence the habit.

Hi Warren

A great set of samples. I've just ticked a couple of "how will I do that" off my list!

However, I think the outermost call to NaviMarkup is improperly nested (you will end up with ul -> ul rather than ul -> li -> ul)

Also, do you think this is verging on too much code for a view? I'd have attacked this as a surface controller and nav view model maybe?

@andiih thanks for that spot, just fixed the example now :)

Awesome examples you have made Warren. Thanks!
I do have a question regarding this Navigation Example and hopefully you can help me and others out.

The generated list is exactly what I want perfectly looking from Rootnode till end-variable.
But, most of the time, in the content-section, the architecture is for example like this:

Homepage (lvl1)
About us (lvl2)
Contact (lvl2)
Books(lvl2)
Book Detail (lvl3)

Although 'Homepage' is the rootnode, it basically is the same level(2) as 'About us', 'Contact' and 'Books' in terms of generating a list for the navigation. I am struggling a bit getting the 'Homepage' at the same level(2).

Would be great if you can help me out on this one as I am pretty new to Razor and Umbraco.
Thanks in advance anyway!