Sub navigation Not Displaying

[Developing4thePelican]

I've completed the installation and have the new property type. I've added it to my homepage doc type and have the menu created.

master page

 <!-- Navigation-->
          @await Html.PartialAsync("Navigation")

navigation partial

  <!-- Navigation-->
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="mainNav">
        <div class="container px-4 px-lg-5">
            <a class="navbar-brand" href="@homePage.Url()">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">

                      @await Html.PartialAsync("Partials/Navigation/TopNavigation")
                </ul>
            </div>
        </div>
    </nav>

The Top and Sub Navigation Code is pulled directly from the github.

I have also added the following to the _ViewImports @using UmbNav.Core @addTagHelper *, UmbNav.Core

The site loads without error, top nav displays, but the menu will not display the dropdown. I would like it to display at least 2 sub-menus. Under Test, I have added two pages.

Ex:

• Test
  • Test Dropdown 1
    • Test Dropdown 2

When I inspect the code, I see the following:

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

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

            </ul>

I am not sure what I am missing, but any advice would be greatly appreciated.

[AaronSadlerUK]

Silly question I'm sure, but have you wired it up to loop through the children?

for example:

<ul class="navbar-nav">
  @foreach (var navigationLink in Model.TopNavigation!)
  {
      @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>
              <ul class="dropdown-menu">
                  <li>
                      <a class="dropdown-item @navigationLink.CustomClasses" href="@navigationLink.Url()" target="@navigationLink.Target">Go to @navigationLink.Title</a>
                  </li>
                  @foreach (var child in navigationLink.Children)
                  {
                      <li>
                          <a class="dropdown-item @child.CustomClasses" href="@child.Url()" target="@child.Target">@child.Title</a>
                      </li>
                  }
              </ul>
          </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>

[Developing4thePelican]

Not silly at all. I'm a new developer trying to learn this on my own.

I've inserted the code you provided into my navigation partial. See below:

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="mainNav">
    <div class="container px-4 px-lg-5">
        <a class="navbar-brand" href="@homePage.Url()">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">

                  @await Html.PartialAsync("Partials/Navigation/TopNavigation")

  @foreach (var navigationLink in Model.TopNavigation!)
  {
      @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>
              <ul class="dropdown-menu">
                  <li>
                      <a class="dropdown-item @navigationLink.CustomClasses" href="@navigationLink.Url()" target="@navigationLink.Target">Go to @navigationLink.Title</a>
                  </li>
                  @foreach (var child in navigationLink.Children)
                  {
                      <li>
                          <a class="dropdown-item @child.CustomClasses" href="@child.Url()" target="@child.Target">@child.Title</a>
                      </li>
                  }
              </ul>
          </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>

At this point, it breaks - 'IPublishedContent' does not contain a definition for 'TopNavigation' and no accessible extension method 'TopNavigation' accepting a first argument of type 'IPublishedContent' could be found (are you missing a using directive or an assembly reference?)

Suggestions on how to fix this would be much appreciated.

[AaronSadlerUK]

I would expect that to happen, I copied that example code out of my own site.

I don't have enough of your code available to be able to provide an example, in my code Model.TopNavigation needs replacing with what your property is called, if your new it will most like be something like Model.Value("PROPERTYALIASHERE")

[Developing4thePelican]

Got that added in, but it's causing other issues. Added in Model.Value("umbNav")

I now get - foreach statement cannot operate on variables of type 'object' because 'object' does not contain a public instance or extension definition for 'GetEnumerator'

I'm attaching my views folder, hoping you can diagnose. I have another menu option that I followed a tutorial on, but it doesn't give me the dropdown depth that yours does, so I really need this option to work.

Thank you for all your help.

Views.zip

[AaronSadlerUK]

Try

Model.Value<IEnumerable<UmbNavItem>>("umbNav")

[Developing4thePelican]

@foreach (var navigationLink in Model.Value<IEnumerable<UmbNavItem>>("umbNav"))

error message: The type or namespace name 'UmbNavItem' could not be found (are you missing a using directive or an assembly reference?) + @foreach (var navigationLink in Model.Value<IEnumerable>("umbNav")) Operator '!=' cannot be applied to operands of type 'method group' and '' + @if (navigationLink.Children != null && navigationLink.Children.Any()) 'PublishedContentExtensions.Children(IPublishedContent, IVariationContextAccessor?, string?)' is a method, which is not valid in the given context + @if (navigationLink.Children != null && navigationLink.Children.Any()) Foreach cannot operate on a 'method group'. Did you intend to invoke the 'method group'? + @foreach (var child in navigationLink.Children)

[AaronSadlerUK]

To I've just looked at your views:

Shouldn't it begin with this: @foreach (var navigationLink in umbNav)

[Developing4thePelican]

That's what I tried, but it seems it doesn't like that either.

Added: @foreach (var navigationLink in umbNav)

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

The umbNav is added to the homepage doc type as a tab. See the screenshot - had to upload it as a zip because it wouldn't let me upload an image. I'm not sure if that makes a difference.

Screenshot.zip

[AaronSadlerUK]

Try this for your TopNavigation.cshtml

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using UmbNav.Core.Models
@using UmbNav.Core.Extensions

@{
    var site = Model.Root();
    var umbNav = site.Value<IEnumerable<UmbNavItem>>("umbNav");
}
}
<ul class="navbar-nav">
    @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>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item @navigationLink.CustomClasses" href="@navigationLink.Url()" target="@navigationLink.Target">Go to @navigationLink.Title</a>
                    </li>
                    @foreach (var child in navigationLink.Children)
                    {
                        <li>
                            <a class="dropdown-item @child.CustomClasses" href="@child.Url()" target="@child.Target">@child.Title</a>
                        </li>
                    }
                </ul>
            </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>

[Developing4thePelican]

That worked to show the first dropdown, but the second one isn't displaying. There should be another dropdown under Sub 1 Captures.zip

[AaronSadlerUK]

Ok so you need to do some developing and add the relevant front end html to loop through the the child items to generate the second level.

I have provided enough of an example to show how the plugin works, and what's required.

Good luck!

[Developing4thePelican]

Thank you!