make menu thats always take parents child pages - Razor

Anders Brohus 194 posts 475 karma points

Mar 20, 2015 @ 13:04

Make menu that's always take parents child pages

Hi Umbraco devs

I need some help how to make menu that does not change/are keeping the same pages and is visible at all child pages Because i got a page where there can be takes pages under text pages.

I tried make some sort of how the Umbraco back office is going to look like

First - Parent page
-Second1 - Child
-Second2 - Child
-Second3 - Child
--Third1 - Grandchild / Dropdown from second3
--Third2 - Grandchild / Dropdown from second3
--Third3 - Grandchild / Dropdown from second3
--Third4 - Grandchild / Dropdown from second3
---Fourth - Grand grandchild / Dropdown from Third4

So when i stand at the parent page i only see three menu items, then i can open Second3 and i see Third 1 to 4, where third4 can open like second3.

Right now i got this code

@{ Umbraco.Web.Models.DynamicPublishedContent currentPage = CurrentPage;

 var selection1 = CurrentPage.Ancestors(); 



    List<Umbraco.Web.Models.DynamicPublishedContent> selection = currentPage.Children.OrderBy(x => x.SortOrder).ToList(); }
<ul class="TextPageNaviUl no-pad mar-t-20">
    @foreach (Umbraco.Core.Models.IPublishedContent page in selection)
        {
        <li>
            <a href="@page.Url">@page.Name</a>
            @if (page.Children.Any())
            {
                <ul>
                    @foreach (Umbraco.Core.Models.IPublishedContent child in page.Children())
                    {
                        <li>
                            <a href="@child.Url">@child.Name</a>
                            @if (child.Children.Any())
                            {
                                <ul>
                                    @foreach (Umbraco.Core.Models.IPublishedContent grandchild in child.Children())
                                    {
                                        <li><a href="@grandchild.Url">@grandchild.Name</a></li>
                                    }
                                </ul>
                            }
                        </li>
                    }
                </ul>
            }
        </li>
        }
</ul>

Right now when i click on Third4 the menu "resets" and only shows Fourth, i need it to keep displaying all the other options.

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Mar 21, 2015 @ 19:34

Hi Anders,

If I understand your question correct I think that you can use the pre-code snippet called List Descendants From Current Page as a good starting point and then make the modifications, so it meets your needs 100%.

I have made a change to the pre-code snippet called List Descendants From Current Page, I have added AncestorOrSelf(1), so it always to up to level 1, and list the pages from there.

In the orginal pre-defined List Descendants From Current Page the code is:

@foreach (var childPage in CurrentPage.Children.Where("Visible")){
... 
}

And I have added AncestorOrSelf(1), as I described ealier in this post.

@foreach (var childPage in CurrentPage.AncestorOrSelf(1).Children.Where("Visible")){
... 
}

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@* Ensure that the Current Page has children, where the property umbracoNaviHide is not True *@
@if (CurrentPage.Children.Where("Visible").Any())
{
    @* Get the first page in the children, where the property umbracoNaviHide is not True *@
    var naviLevel = CurrentPage.Children.Where("Visible").First().Level;
    
    @* Add in level for a CSS hook *@
    <ul class="level-@naviLevel">            
        @* For each child page under the root node, where the property umbracoNaviHide is not True *@
        @foreach (var childPage in CurrentPage.AncestorOrSelf(1).Children.Where("Visible"))
        {
            <li>
                <a href="@childPage.Url">@childPage.Name</a>

                @* if the current page has any children, where the property umbracoNaviHide is not True *@
                @if (childPage.Children.Where("Visible").Any())
                {                    
                    @* Call our helper to display the children *@
                    @childPages(childPage.Children)
                }
            </li>
        }
    </ul>
}


@helper childPages(dynamic pages)
    {
    @* Ensure that we have a collection of pages *@
    if (pages.Any())
    {
        @* Get the first page in pages and get the level *@
        var naviLevel = pages.First().Level;
        
        @* Add in level for a CSS hook *@
        <ul class="level-@(naviLevel)">
            @foreach (var page in pages.Where("Visible"))
            {
                <li>
                    <a href="@page.Url">@page.Name</a>
                    
                    @* if the current page has any children, where the property umbracoNaviHide is not True *@
                    @if (page.Children.Where("Visible").Any())
                    {                        
                        @* Call our helper to display the children *@
                        @childPages(page.Children)
                    }
                </li>
            }
        </ul>
    }
}

Hope this helps or at least can be a good starting point for you,

/Dennis

Copy Link

Anders Brohus 194 posts 475 karma points

Mar 21, 2015 @ 20:26

Hi Dennis

Thanks so much i will try that code! :)

Here is my node tree :)

Node tree

I would like the macro to always show the first "Test 2" children and their children.

So if i am at the "Test 3" page i can still see the first "Test 2" children :)

Copy Link

is working on a reply...

Flag this post as spam?

Make menu that's always take parents child pages