show sub nodes and current page only in navigation - Using Umbraco And Getting Started

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Tom Cowling 144 posts 342 karma points

Oct 28, 2020 @ 16:09

Show sub-nodes and current page only in navigation

Using Umbraco And Getting Started

Umbraco 8

Hi,

I'm creating a navigation menu and it's nearly there, but I can't work out the last bit.

I have a structure like this:

Home
- About Us
  - Who We Are
    - The Team
    - Our History
  - News
    - News Archive
    - Media packs

I would like it so when I click on About us, it shows:

Home
- About Us
  - Who We Are
  - News

If I click on Who We Are or any of it's nodes, it should show:

Home
- About Us
  - Who We Are
    - The Team
    - Our History
  - News

If I click on News or any of it's nodes, it should show:

Home
- About Us
  - Who We Are
  - News
    - News Archive
    - Media packs

What I have so far is the following, which shows the full structure as in the first example, but I can't work out what I can do to hide the nodes that aren't part of the current page's sub nodes or the current page.

Thanks,

Tom

@inherits Umbraco.Web.Mvc.UmbracoViewPage
@using Umbraco.Core.Models.PublishedContent
@using Umbraco.Web

@{ var selection = Model.AncestorOrSelf(2); }

<div id="leftmenu">
    <ul><li><a class="homemenuitem" href="/"><i class="fas fa-home"></i> <strong>@Model.AncestorOrSelf(2).Value("title")</strong></a></li></ul>
    @Traverse(selection)
</div>


@helper Traverse(IPublishedContent node)
{

    const int maxLevelForSitemap = 4;


    var selection = node.Children.Where(x => x.Value<bool>("showInNavigation") && x.Level <= maxLevelForSitemap).ToArray();


    if (selection.Length > 0)
    {
        <ul>
            @foreach (var item in selection)
            {
            var levelclass = item.Level == 3 ? "lilevelone" : "lileveltwo";

            <li class="@levelclass"><a href="@item.Url"><i class="fas fa-caret-square-right"></i> @item.Name</a>
                @Traverse(item)
            </li>

            }
        </ul>
    }
}

Copy Link

Marc Goodson 2141 posts 14324 karma points MVP 8x c-trib

Oct 29, 2020 @ 09:43
0
Hi Tom

I think you can make use of a property on all IPublishedContent nodes called Path.

If you write out the current Path, in a view you'll get an idea of what it is
```
@Model.Path
```
.. it's a comma delimited string of all the unique ids of the content items above the particular item in the content tree. eg
```
-1,123,1234,343433,5555555
```
Where 5555555 is the id of the current page, 343433, the id of it's parent, 1234 the id of the section, and so on back to -1 the root of the site etc...

So this means when traversing nodes to write out your navigation, you can 'get' the current section that the page is in using Ancestors and the 'level' (I never know without writing out the levels which would be the number to use for your section page)

Then read the Path property of this section node eg

-1,123,1234

then when looping through the rest of the navigation, if the 'level' is deeper than the 'section' level check the Path property to compare if it starts with -1,123,1234 if it does, then it's a page that's in the current section and should be written out... if it has a different path, you can ignore it...

or at least that's the gist, knowing about the Path property hopefully gives you something to work with to suit your requirements!

regards

marc
Copy Link
Tom Cowling 144 posts 342 karma points

Oct 29, 2020 @ 15:58

0

That certainly looks interesting. I added it in to have a look at what's produced and can see exactly what you mean about the node structure being accessible.

The logic you've said to apply makes sense for me too. I'll see if I can work out how to get that down as code now.

Thanks,

Tom

Copy Link
is working on a reply...

Please Sign in or register to post replies