If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

Drupal 7.x. How to work with multi-column menus

This tutorial shows how to work with multi-column menus in Drupal.

Drupal 7.x. How to work with multi-column menus

Multi-column submenus

Drupal. How to work with multi-column menus-1

  1. We can see that our menu has multi-column sub menus:

    Drupal. How to work with multi-column menus-2

  2. Go to Structure-Menus in order to manage menu. In our case Main menu should be edited. Click on list links:

    Drupal. How to work with multi-column menus-3

  3. We can check structure of menu. We can see the Home submenu has three columns (please check screenshot in step1, this is how menu shows up on frontend):

    Drupal. How to work with multi-column menus-4

  4. In order to add a new column, we should add a sub menu. We have moved menu item to sub menu. Now menu should have four columns:

    Drupal. How to work with multi-column menus-5

  5. Scroll down and save changes:

    Drupal. How to work with multi-column menus-6

  6. We have added one more column to sub menu:

    Drupal. How to work with multi-column menus-7

Drop-down submenus

Drupal. How to work with multi-column menus-8

  1. We have added sub menus to Contacts menu and saved changes:

    Drupal. How to work with multi-column menus-9

  2. Refresh the page. We can see that sub menus show up in columns:

    Drupal. How to work with multi-column menus-10

  3. In this section we can modify settings for menu. We can see that our template has
    Horizontal menu type by default:

    Drupal. How to work with multi-column menus-11

  4. Scroll down and expand Multi-Column Sub-Menus tab. We should specify ID of appropriate menu item. In this case it will be excluded from multi-column layout and we will have drop-down menu:

    Drupal. How to work with multi-column menus-12

  5. Open menu links and hover over Edit button of appropriate menu item. You will see ID of menu in the link (you may also click on edit button and ID will show up in browser address bar). In our case ID is 4931:

    Drupal. How to work with multi-column menus-13

  6. Now we should specify this ID in Exclude below menu items field. You should put comma in order to specify several IDs. No space between comma and IDs. We have added ID 4931:

    Drupal. How to work with multi-column menus-11

  7. Scroll down and save changes:

    Drupal. How to work with multi-column menus-15

  8. Refresh the page. We have added drop-down menu. You can perform the same actions to the rest menus:

    Drupal. How to work with multi-column menus-16

Feel free to check the detailed video tutorial below:

Drupal 7.x. How to work with multi-column menus