Hi, I am trying to render my main navigation on the frontend, I have my code in a partial and can get the links that are under the "Home" node. I need to get any child pages of the child page under the home node. I have this so far; `@inherits Umbraco.Web.Mvc.UmbracoViewPage @{ var selection = Umbraco.ContentAtRoot().FirstOrDefault() .Descendants() .Where(x => x.IsVisible()); } @foreach (var item in selection) { @item.Name } ` Portal Login`` My content node structure looks like this https://prnt.sc/0um2Pv97wvHM I've changed the children method to descendants and that's just listing ALL links as a long list. This is what I am trying to achieve with the menu: https://prnt.sc/xwtL7-3r5k2R

If you're looping through the 'Children' of Home, then in your foreach loop, each Item should then expose it's Children recursively. Etc etc

Yes, it's bringing the children of home out - but I now want to get the children of "What we do" to show. How would I go about doing that?

Yes sorry that is what I mean, so in your foreach loop in your example. Something similar to this should work

<ul id="menu-main-menu" class="menu">
        @foreach (var item in selection)
        {
            <li>
                <a href="@item.Url" title="@item.Name">@item.Name</a>

                @if(item.Children().Any())
                {
                  <ul class="submenu">
                    foreach(var subitem in item.Children())
                    {
                      <li>
                        <a href="@subitem.Url" title="@subitem.Name">@subitem.Name</a>
                      </li>
                    }
                  </ul>
                }
            </li>
        }
    </ul>

Yeah, that makes sense @Hooky but it throws this error;

error CS0103: The name 'subitem' does not exist in the current context'

You're quite right, I'd forgotten the 'var' in the second foreach. I've corrected that, that is more of an example though to give you an idea

So the first foreach looks for the children nodes under the home node and then the 2nd loop looks for any children of the child

That's correct yes, and the second loop will only happen if there are any children to loop through 🙂

Ah, now the link that has children links, that is not showing at all on the frontend. but the other links are.

All your doc types for your pages should inherit from IPublishedContent (built in to Umbraco), it's this that gives them the methods to access children etc You can try the following, of course, the html markup, classes etc would need to be amended for your project I've just added some examples in here (for example the css class 'subitem')

<ul>
    @foreach (var item in selection)
    {
        <li>
            <a href="@item.Url" title="@item.Name">@item.Name</a>

            @if (item.Children().Any())
            {
                <ul class="submenu">
                    @foreach(var subitem in item.Children())
                    {
                        <li>
                            <a href="@subitem.Url" title="@subitem.Name">@subitem.Name</a>
                        </li>
                    }
                </ul>
            }
        </li>
    }
</ul>

Might also depend what version of Umbraco you're using. Either way, the

.Children()

method of your items in your loop should output what you need 🙂

Umbraco 8

Should be ok then

The site won't even run locally now. https://gyazo.com/b248e613b0c51b104feab288938395c0 So just looking into this now.

Ah that definitely seems unrelated to any of the code above. Probably needs a restart, you can check the log files

Where would I find the log file on my local machine?

Off the top of my head, I think it should be within the project directory, App_Data > Temp > Logs

Yes, found it, rebuilt the solution after cleaning it, ran it again and it's worked. I just need to build my html around the menu now 🙂

Awesome, glad I could help. Good luck with the project

Thank you, On the top LI element i Need to check if it has children pages and then append a class to it. I've done the following;

<li class="@if(item.Children().Any()){ menu-item-has-children }">

System.Web.HttpCompileException: 'D:\sites\PrincipleNetworks.Web\Views\Partials\navigation.cshtml(13): error CS1002: ; expected'

@foreach (var item in selection)
            {
                var hasChildren = item.Children.Any();

                <li class="@(hasChildren == true ? "someClass" : null)">

You could do something like that (I've made 'hasChildren' a variable so that it's a little bit easier to read)

Bizarre - i don't see anything wrong with the code but it keeps throwing

System.Web.HttpCompileException: 'D:\sites\PrincipleNetworks.Web\Views\Partials\navigation.cshtml(5): error CS1002: ; expected'

What is on line 5? It wants a semicolon (;) at the end of something

fixed it now. 😄

👍

Phew, I think that calls for lunch time - get away from the screen and come back refocused. 🙂

If you wanted something to support how ever many levels you have.. then if instead of using the navigation snippet to create a partial.. use the sitemap snippet.. that has a recursive traverse pattern. The following is from v12, but think the partial snippet also exists in v8 as a starting point.

csharp
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using Umbraco.Cms.Core
@using Umbraco.Cms.Core.Models.PublishedContent
@using Umbraco.Cms.Core.Routing
@using Umbraco.Extensions

@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedUrlProvider PublishedUrlProvider
@*
    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 local method called Traverse() to select and display the markup and links.
*@

@{ var selection = Model.Root(); }

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

@* Helper method to traverse through all descendants *@
@{
    void Traverse(IPublishedContent? node)
    {
        //Update the level to reflect how deep you want the sitemap to go
        const int maxLevelForSitemap = 4;

        @* Select visible children *@
        var selection = node?.Children.Where(x => x.IsVisible(PublishedValueFallback) && x.Level <= maxLevelForSitemap).ToArray();

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

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

Definitely will come in handy where the nav is a little more complex - for this project, the menu is just a simple dropdown.