Multi-level Bootstrap 4 Navbar With Navee

Problem

You want to setup a Bootstrap 4 Navbar and use Navee to manage the navigation menu in Craft.

Solution

This was built for Bootstrap v4.0.0-alpha.6 and Navee 1.3.0.

Step 1: Download and Install Navee

Go to https://github.com/fromtheoutfit/navee and download Navee.

Step 2: Download and Install latest Bootstrap 4 build

Currently v4.0.0-alpha.6 which you can get at https://v4-alpha.getbootstrap.com.

Step 3: Build Navigation in Navee

Setup your 2 level navigation menu in Navee. Call it Main Navigation so the handle is mainNavigation.

Step 4: Code it out

Setup your template code as follows:

<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" 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>

Discussion

As new Bootstrap 4 releases come out you may need to tweak the Navbar code. Just watch their changelog for any changes to the Navbar component.

Submitted by Bryan Garrant on 31st March, 2017