Create Multi-level Bootstrap Menu in Drupal 8

Drupal 8 Drop-Down Menu

Bootstrap has recently removed the sub-menu features from version 3.x, so it won’t support the multi-level menu anymore. But drupal 8 has a multi-level menu structure. I am going to show you how to get back the sub-menu features in bootstrap and how to render a multi-level menu in drupal 8. Just copy and paste the following CSS in your custom CSS, it has been taken from the bootstrap version 2.x with some custom changes,

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    padding: 0px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a:after {
  content: "\e080";
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-size: 10px;
  float: right;
  margin-top: 5px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}
.navbar-nav li:last-child > .dropdown-menu {
  left: auto;
  right: 0px;
}
.navbar-nav li:last-child > .dropdown-menu a {
  text-align: right !important;
}
.navbar-nav li:last-child > .dropdown-menu .dropdown-submenu > a:after {
  float: left;
  content: "\e079";
}
.navbar-nav li:last-child > .dropdown-menu .dropdown-submenu > .dropdown-menu {
  left: -100%;
}

This is enough to get back the sub-menu feature, but the tricky part is that we must render the drupal menu to support the bootstrap submenu. Create menu--main.html.twig file in the templates/ folder and copy/paste the following code into it.

{# All menu and submenu items #}
<div class="navbar">
  <div class="navbar-header pull-right">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse">
      {% import _self as menus %}
      {#
        We call a macro which calls itself to render the full tree.
        @see http://twig.sensiolabs.org/doc/tags/macro.html
      #}
      {{ menus.menu_links(items, attributes, 0) }}

      {% macro menu_links(items, attributes, menu_level) %}
        {% import _self as menus %}
        {% if items %}
          {% if menu_level == 0 %}
            <ul class="nav navbar-nav" role="menu" aria-labelledby="dropdownMenu">
          {% else %}
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          {% endif %}
          {% for item in items %}
            {% if item.below %}
              {% if menu_level == 0 %}
                <li class="dropdown">
                  <a href="{{ item.url }}" class="dropdown-toggle" data-toggle="dropdown">{{ item.title }} <span class="caret"></span></a>
                  {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
                </li>
              {% else %}
                <li class="dropdown-submenu">
                  <a href="{{ item.url }}">{{ item.title }}</a>
                  {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
                </li>
              {% endif %}
            {% else %}
              <li {{ item.attributes }}>{{ link(item.title, item.url) }}</li>
            {% endif %}
          {% endfor %}
          </ul>
        {% endif %}
      {% endmacro %}

    </div>
  </div>
</div>

I have been using twig’s macro functionality in the code. Macros are comparable with functions in regular programming languages. They are used to put often used HTML idioms into reusable elements. And finally, don’t forget to clear the drupal cache! then enjoy your multi-level menu.