How to Create a Responsive Off-canvas Menu in Drupal 8

An off-canvas menu is the best way to offer a pleasant experience to those visiting your site from mobile devices. It is rapidly becoming a web design industry standard for any website.

In this tutorial, you will learn how to create and configure an off-canvas menu with the "Responsive and off canvas menu" Drupal 8 module.

This module relies on a couple of dependency libraries. They include the functionality of swipe gestures to open and close the menu on mobile screens.

They also provide the Superfish functionality when your site visitor hovers over the menu items.

In this tutorial, you will learn how to hide the default Drupal main menu and use an off-canvas menu instead.

Let’s start!

Step #1. Download the Module and Its Dependencies

• Use your preferred method to download the module.

• Download the dependencies to the /libraries folder inside your root folder (if you don’t have the /libraries folder yet, create it manually). Download the required libraries by clicking these links:
• Unzip and rename the /libraries folder. You should have the following directory structure now:

• Enable the module.

Step #2. Configure the Menu Module

• Click Configuration > User interface > Responsive menu.
• You’ll be presented with following configuration options: 

1. The menu that will be rendered by the module.
2. The number of levels (depth) of the menu. I’ll leave the default 9.
3. The machine name of the menu which will be rendered in the off-canvas menu. To find out the machine name of the main navigation menu, for example, click Structure > Menus > Main Navigation. You’ll see the machine name next to the title.
4. The type of wrapper which will contain the menu block. You can choose between nav or div.
5. Use a breakpoint. Uncheck this option, since we want our off-canvas menu to apply to all screen sizes.
6. Use the default module’s CSS, i.e. you can apply your own styles if you uncheck this option.
7. Keyboard accessibility navigation.
8. Add the off-canvas menu on the admin theme (leave unchecked).
9. THEME COMPATIBILITY. this option is not required when working with Bartik (for example), but you will need to click this checkbox if you’re working with a Bootstrap based theme.
10. Menu swipe and appearance options.
11. Superfish options.
12. Ad swipe gestures (for cell phones and tablets).

• Choose your preferred options.
• Click Save configuration.

Step #3. Clear the Site Cache

• Click Configuration > Development > Performance.
• Press the Clear all caches button.
• Click Save configuration.

Step #4. Check the Menu Structure

• Click Structure > Menus > Main navigation.
• Review the structure of the main navigation menu. Notice in this example, menu Item 3 has a depth of 3, while menu Item 1 has a depth of 2.
• Add/edit the links to your menu if necessary.

Step #5. Place the “Hamburger" Icon

It’s time to place the “hamburger” menu icon (preferably) into the “menu” section of the site. At the same time, we will be disabling the default Main navigation block so that we don’t have the same menu twice.

• Click Structure > Block layout.
• Go to the Primary menu region.
• Click the drop-down arrow beside the Configure.
• Select Disable

• Click the Place block button.
• Type the word “menu” in the search box.
• Choose Responsive menu mobile icon by clicking the Place block button next to it.
• Notice that there’s another block called Horizontal menu. This is the module’s default menu for larger screen sizes. Remember, we deactivated this option in Step #2 (numeral 5), because we only want an off-canvas menu for all screen sizes. Feel free to play with these options!

• Uncheck Display title.
• Click Save block.

• Go to your Home page and you should see your newly added menu.

• Click on the "hamburger" icon.
• Navigate through the whole menu structure with the arrows next to each menu item to check everything works as desired.

Congratulations! You just learned how to add an off-canvas menu to your Drupal 8 site. No doubt, those visiting your site from their mobile devices will enjoy and appreciate it. 

Thanks for reading!

Additional Reading

Drupal is an amazing tool for creating websites and applications. If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal training videos, plus the best-selling"Drupal 8 Explained" book!

About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.