Umbraco 7.4.3 dropdown navigation

Question

I just started using Umbraco (and razor/mvc). So far I've managed to setup the base design but next move is the navigation.

I've been reading the documentation and looking for code snippets online but unfortunately none of them really helps (or I might not understand it correctly).

The code I'm using right now looks like this:

<ul>
        @{
            var homeNode = CurrentPage.AncestorsOrSelf(1).First();

            // The menu items we want are all of the children of the homepage
            // We also check if "Hide in navigation" is on in the menu, we shouldn't show hidden items
            var menuItems = homeNode.Children.Where("UmbracoNaviHide == false");
        }

        <li><a href="@homeNode.Url">@homeNode.Name</a></li>

        @foreach (var page in menuItems)
        {
            if(page.Name!="Banner Settings")
            {
            <li>
                <a href="@page.Url">@page.Name</a>

                    <!-- If the page has child nodes (2nd level) that are visible and docTypeAlias is Textpage (textpages) -->
                @if (page.Textpages.Where("UmbracoNaviHide == false").Count() > 0)
                {
                    <ul>
                        @foreach (var childPage in page.Children.Where("UmbracoNaviHide == false"))
                        {
                            <li><a href="@childPage.Url">@childPage.Name</a></li>
                        }
                    </ul>
                }
            </li>
            }
        }
    </ul>

taken from How to create Top navigation Sub Menu in umbraco CMS using partial view.

But unfortunately as the code itself points out, it only displays the current page I'm on and it's children.

Is there a way to display ALL menuitems including their children instead of the current one? I can't seem to figure it out.

Answer 1

You will actually find example template implementations in Umbraco of how to implement navigation. Below is an example straight out of Umbraco v7.4.3

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@*
    This snippet displays a list of links of the pages immediately under the top-most page in the content tree.
    This is the home page for a standard website.
    It also highlights the current active page/section in the navigation with the css class "current".
*@

@{ var selection = CurrentPage.Site().Children.Where("Visible"); }

<ul>
    @foreach (var item in selection)
    {
        <li class="@(item.IsAncestorOrSelf(CurrentPage) ? "current" : null)">
            <a href="@item.Url">@item.Name</a>
        </li>
    }
</ul>

This will give you your top level menu but what you want is for this to recursively render all children as well and so the Sitemap example will give you a better insight into how to achieve this. The below example is again taken from Umbraco v7.4.3.

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@*
    This snippet makes a list of links of all visible pages of the site, as nested unordered html lists.

    How it works:
    - It uses a custom Razor helper called Traverse() to select and display the markup and links.
*@

@{ var selection = CurrentPage.Site(); }

<div class="sitemap">
    @* Render the sitemap by passing the root node to the traverse helper, below *@
    @Traverse(selection)
</div>


@* Helper method to travers through all descendants *@
@helper Traverse(dynamic node)
{
    @* Update the level to reflect how deep you want the sitemap to go *@
    var maxLevelForSitemap = 4;

    @* Select visible children *@
    var selection = node.Children.Where("Visible").Where("Level <= " + maxLevelForSitemap);

    @* If any items are returned, render a list *@
    if (selection.Any())
    {
        <ul>
            @foreach (var item in selection)
            {
                <li class="level-@item.Level">
                    <a href="@item.Url">@item.Name</a>

                    @* Run the traverse helper again for any child pages *@
                    @Traverse(item)
                </li>
            }
        </ul>
    }
}

The templates are there in a blank install. You don't need to install a starter kit to access them. In the developer section go to Partial View Macro and click on create then you will see the template options.