@{ var selection = Model.Root().Children.Where(x => x.IsVisible()).ToArray(); }

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
  @if (selection.Length > 0)
{
    <ul class="navbar-nav mr-auto">
         @foreach (var item in selection)
        {    
      <li class="col l1 nav-item dropdown @(item.IsAncestorOrSelf(Model) ? "active" : null)">
        <a class="nav-link dropdown-toggle" href="@item.Url" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          @item.Name
        </a>
         @if (item.Children.Any(x => x.IsVisible()))
        {
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
             @foreach (var subMenu in item.Children.Where(x => x.IsVisible()))
     {
          <li class="dropdown-item">
            <a href="@subMenu.Url">@subMenu.Name</a>
          </li>
          }
        </ul>
        }
      </li>
      }
    </ul>
    }
  </div>
</nav>