Is there some easy way to create a multi-column (or grid) menu, eg:

item 1   item 4   item 7
item 2   item 5   item 8
item 3   item 6

There are no parents in this menu.

I would rather not install a module just to do this.

You can do it easily with views, is there no way built in to do it with menus?


You can change the menu twig with an additional row loop with 3 items per row:


  {% if items %}
    {% for row in items|batch(3) %}
    <ul class="row">
      {% for item in row %}
        <li{{ item.attributes }}>
        {{ link(item.title, item.url) }}
      {% endfor %}
    {% endfor %}
  {% endif %}

This is a simplified version for only one level as your menu items have no parents.


There is no build-in way to set Drupal's menus to fill multiple columns from the UI, however, since menus in Drupal are html lists, you can use css to break them into multiple columns:

ul {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;

This will work in all browsers save Internet Explorer 9 or lower. If you need to support old versions of IE, you would need to use a little js helper like Columnizer jQuery Plugin or Modernizr.

The advantage of this approach is, that you can use media queries to set the number of columns to fit different devices/screen widths.

  • Am I wrong in thinking that works for CSS3 only? Internet explorer 10+? Would it work for IE9? – tanbog Aug 2 '16 at 13:03
  • Already updated my answer ;) No, it wouldn't, but I listed two js which ensure backward compatibility. – Zuzuesque Aug 2 '16 at 13:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.