DEV Community

Vadim Filimonov
Vadim Filimonov

Posted on

Setting up the mobile menu in Drupal 8 / Responsive and off-canvas menu

Consider one of the easiest ways to create a mobile menu in Drupal 8. To do this we'll use the module Responsive and off-canvas menu.

Install via Composer:

composer require drupal/responsive_menu ; drush en responsive_menu -y
Enter fullscreen mode Exit fullscreen mode

Download the library mmenu.

cd ~/site_root/libraries/ ; git clone https://github.com/FrDH/jQuery.mmenu.git && mv jQuery.mmenu mmenu
Enter fullscreen mode Exit fullscreen mode

It would be more correct to put the library through the linker, but we will save time and just clone the library into the libraries folder.

Go to the settings page of the Responsive Menu module:

/admin/config/user-interface/responsive-menu
Enter fullscreen mode Exit fullscreen mode

Under OFF CANVAS specify the machine menu name.

If you want "Basic Navigation", leave the main.<br>

The rest of the settings can be left by default.

Go to the "Block diagram" page:

/admin/structure/block
Enter fullscreen mode Exit fullscreen mode

We place the hamburger in the desired region:

The name of the hamburger block — Responsive menu mobile icon<br>

Go to the home page and click on the hamburger.

At 320px wide, the mobile menu will look like this<br>

Discussion (0)