Bootstrap 4 and NavEE

[bgarrant]

How can we use NavEE with the new Bootstrap 4 syntax https://v4-alpha.getbootstrap.com/components/navbar/? All looks pretty easy other than the classes on the children. How can we get that working?

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

this is what I have so far but dropdowns are not working

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="{{ siteUrl }}">{{ siteName }}</a>

  <div class="collapse navbar-collapse" id="navbarNavDropdown">

    {% set navConfig = {
      'startwithActive' : true,
      'maxDepth' : 2,
    } %}

    {% set navigation = craft.navee.getNav('mainMenu', navConfig) %}

    <ul class="navbar-nav">
        {% nav node in navigation %}
            <li class="nav-item{% if node.hasDescendants() %} dropdown{% endif %}">
              {% if node.hasDescendants() %}
              <a href="{{ node.link }}" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ node.title }}</a>
              {% else %}
              <a href="{{ node.link }}" class="nav-link">{{ node.title }}</a>
              {% endif %}

              {% ifchildren %}
              <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                {% children %}
              </ul>
              {% endifchildren %}
            </li>
        {% endnav %}
    </ul>

  </div><!--/.navbar-collapse -->
</nav>

[bgarrant]

I did get it working with this...but is there a cleaner way to write the code?

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="{{ siteUrl }}">{{ siteName }}</a>

  <div class="collapse navbar-collapse" id="navbarNavDropdown">

    {% set navConfig = {
      'startwithActive' : true,
      'maxDepth' : 2,
    } %}

    {% set navigation = craft.navee.getNav('mainMenu', navConfig) %}

    <ul class="navbar-nav">
        {% nav node in navigation %}
            <li class="nav-item{% if node.hasDescendants() %} dropdown{% endif %}">
              {% if node.hasDescendants() %}
              <a href="{{ node.link }}" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ node.title }}</a>
              {% else %}
              <a href="{{ node.link }}" class="nav-link">{{ node.title }}</a>
              {% endif %}

              {% ifchildren %}
              <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                {% children %}
              </ul>
              {% endifchildren %}
            </li>
        {% endnav %}
    </ul>

  </div><!--/.navbar-collapse -->
</nav>

[bgarrant]

How can I style the Navbar dropdown elements in this format? I need to turn this...

              {% ifchildren %}
              <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                {% children %}
              </ul>
              {% endifchildren %}

Into this...

        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>

[bgarrant]

Here is how you do it everyone. Bootstrap 4 only allows a 2 level menu so make sure and set Navee to max levels 2 in config.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <div class="logo"><img src="/assets/layout/logo.png"></div>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand invisible" href="{{ siteUrl }}">{{ siteName }}</a>

  <div class="collapse navbar-collapse" id="navbarNavDropdown">

    {% set navConfig = {
      'startwithActive' : true,
      'maxDepth' : 2,
    } %}

    {% set navigation = craft.navee.getNav('mainNavigation', navConfig) %}

    <ul class="navbar-nav ml-auto">
      {% for node in navigation %}
        <li class="nav-item{% if node.hasDescendants() %} dropdown{% endif %}">
          {% if node.hasDescendants() and node.level == 1 %}
          <a href="{{ node.link }}" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ node.title }}</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              {% set subNodes = node.getChildren() %}
              {% for subNode in subNodes %}
                <a class="dropdown-item" href="{{ subNode.link }}">{{ subNode.title }}</a>
              {% endfor %}
            </div>
          {% elseif node.level == 1 %}
            <a href="{{ node.link }}" class="nav-link">{{ node.title }}</a>
          {% endif %}
        </li>
      {% endfor %}
    </ul>

  </div><!--/.navbar-collapse -->
</nav>

[adamhopkinson]

Useful, thanks. Could do with some detail in the wiki regarding iterating through children/descendants.

[chukura]

Indeed, it would be great if @michaelfromtheoutfit could flesh this subject out a little more in the wiki. Thank you @bgarrant, this was exactly what I was looking for.