Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Thomas Park 3 posts 73 karma points
    Jun 21, 2016 @ 09:31
    Thomas Park
    0

    Navigation with Sub Menus

    Hi Guys,

    This is a bit of a simple question but I'm only looking for pointers.

    I have got the following code which is the basic Navigation Menu. I want to

      So I want this navigation to load the following menus up;

      1) Home 2) Menu1 2.1) SubMenu1 2.2) SubMenu2 3) Contact

      Would I just need to add into the code a section that would check if there was a child and then list all the child items?

      As I stated at the start I only wont pointers/constructive help.

      Kind Regards, Tom

    Copy Link
  • Alex Skrypnyk 6163 posts 24143 karma points MVP 8x admin c-trib
    Jun 21, 2016 @ 14:18
    Alex Skrypnyk
    0

    Hi Tom,

    Umbraco tree traversing documentation here - https://our.umbraco.org/documentation/reference/templating/mvc/querying

    Are you familiar with Razor?

    Render menu is pretty easy, something like:

    @foreach (var item in rootNode.MainNavigation) {

  • @item.Name
    • }

    Thanks,

    Alex

Copy Link
  • Thomas Park 3 posts 73 karma points
    Mar 01, 2017 @ 12:28
    Thomas Park
    0

    Hi Alex,

    Thank you for the link, that has been helpful for this. I have now made the following which works well, I just need to update it for Bootstrap. I thought this might be useful for anyone else that is looking for something similar.

     @foreach (var childPage in home.Children)
    {   
        if (childPage.Children.Any())
        {                    
            <li class="has-child @(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
                @if(childPage.Children.Any())
                {
                    <span>@childPage.Name</span>
                    @childPages(childPage.Children)
                } else {
                    <a href="@childPage.Url">@childPage.Name</a>
                }

            </li>
        } 
        else
        {
            <li class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
                <a href="@childPage.Url">@childPage.Name</a>
            </li>
        }            
    }

    I have noticed that the Parent of any sub pages is not a link, I am going to have a go at fixing this and will post updated code later..

    Copy Link
    • Please Sign in or register to post replies

    Write your reply to:

    Draft