Thank you.

That fixed the display of the top nav, but now the dropdowns aren't working.

When I inspect I see:

<ul class="navbar-nav ms-auto py-4 py-lg-0">


}
    <a class="nav-link nav-link--active" href="/">Home</a>
    <a class="nav-link" href="/about/">About</a>
    <span class="nav-link">Test</span>


            </ul>

Test should have have two dropdowns below it.

Hi Cedeste,

You will need to use something like below in your _TopNavigation template

@foreach (UmbNavItem item in umbNav)
{
    <ul class="navbar-nav">
        @if (item.Children.Any())
        {
            <li class="nav-item dropdown" >
                <umbnavitem menu-item="item" active-class="nav-link--active" class="nav-link"></umbnavitem>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    @foreach (var child in item.Children)
                    {
                        <umbnavitem menu-item="child" active-class="nav-link--active" class="nav-link"></umbnavitem>
                    }
                </div>
            </li>
        }
        else
        {
            <li class="nav-item" >
                <umbnavitem menu-item="item" active-class="nav-link--active" class="nav-link"></umbnavitem>
            </li>
        }

    </ul>
}

Thank you!

Obviously, if you need more than 2 levels it will need expanding further, but just shout if you need more assistance.

Thank you. I'm starting to look at it now. I really appreciate your help.

Thank you again. I used your example and worked it in with what I was able to come up with last night. I've got it this far:

   @{
    var site = Model.Root();
    var umbNav = site.Value<IEnumerable<UmbNavItem>>("umbNav");
}

<ul class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container px-4 px-lg-5">
        <a class="navbar-brand" href="">Test Site</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ms-auto py-4 py-lg-0">
                @foreach (var navigationLink in umbNav)
                {
                    @if (navigationLink.Children != null && navigationLink.Children.Any())
                    {
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle @navigationLink.CustomClasses @Html.If(navigationLink.IsActive, "active")" href="@navigationLink.Url()" target="@navigationLink.Target" role="button" data-bs-toggle="dropdown" aria-expanded="false">@navigationLink.Title</a>

                <!-- sub menu start -->         
                           <ul class="dropdown-menu">

                                <li>
                                    <a class="dropdown-item @navigationLink.CustomClasses" href="@navigationLink.Url()" target="@navigationLink.Target">Go to @navigationLink.Title</a>


                            @foreach (var child in navigationLink.Children)
                                {
                                <ul  class="dropdown-menu dropdown-submenu dropdown-submenu-left">

                                    <li>
                                        <a class="dropdown-item @child.CustomClasses" href="@child.Url()" target="@child.Target" >@child.Title</a>
                                        <ul  class="dropdown-menu dropdown-submenu dropdown-submenu-left">

                                    <li>
                                        <a class="dropdown-item @child.CustomClasses" href="@child.Url()" target="@child.Target">@child.Title</a>
                                        <ul  class="dropdown-menu dropdown-submenu dropdown-submenu-left">
                                    <li>
                                        <a class="dropdown-item @child.CustomClasses" href="@child.Url()" target="@child.Target">@child.Title</a>
                                    </li>

                                    </ul>
                                    </li>
                                    </ul>
                                    </li>
                                    </ul>
                                }       



                                </li>


                            </ul>

                <!-- sub menu end -->           

                       </li>
                    }
                    else
                    {
                        <li class="nav-item">
                            <a class="nav-link @navigationLink.CustomClasses @Html.If(navigationLink.IsActive, "active") " href="@navigationLink.Url()" target="@navigationLink.Target">@navigationLink.Title</a>
                        </li>
                    }
                }
            </ul>
            </div>
            </div>
            </ul>

This is working successfully, but now I'm not sure how to add the dynamic values for the additional child links. I'm still researching, but im not sure what the call is for the children of children if that makes any sense.

Hi Cedeste,

This is working successfully, but now I'm not sure how to add the dynamic values for the additional child links.

You just need to repeat what you have done for each level that you want to expand, so in your

@foreach (var child in navigationLink.Children){

...}

Section you would do another check for children

@if(child.Children.Any() ... etc

You could simplify it by using some razor functions/helpers