Skip to main content
Multi-level menu

Create Multi-level Bootstrap menu in Drupal 8

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 multi-level menu in the 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 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 drupal cache! then enjoy your multi-level menu.

Comments

Guest (not verified)

Wed, 06/29/2016 - 15:15

Hi Pathirakaliappan,

I've tried this with no success. The submenus still are not showing up. Any ideas?

Enable Multi-level Menus :
There is two important configuration to enable the multi-level menus in drupal,
1. Enable "Show as expanded" option in the parent menu item
2. Set unlimited on "Maximum number of menu levels to display" in Main navigation block configuration

We have used the tricks in our drupal 8 themes check out here (https://dropthemes.in/gallery?combine=&compatibility%5B%5D=drupal_8&pos… )