I have a template that I am trying to convert into a custom theme and it contains a mobile menu that is a duplicate of the main menu.

What is the best way to tackle this with the least amount of duplication?

I tried to create a menu--main.html.twig file and repeated 2 menus in one file. It looked liked it worked at first until my menu contains submenus and then some weird behavior where it nested both menus into the below menu. I would like to avoid creating a separate mobile menu in the admin dashboard and manually adding new links if created, but if that is the best way then I can handle it. Just looking for other opinions.



Are you familiar with Boostrap or Zurb Foundation framework? I suggest you research either of these 2 frameworks and you will find that you can accomplish your goal using either one.

Here is a little background. Basically they are just a javascript file and css file. The javascript file has code for a ton of common/widely used features and built to be mobile responsive. All you have to do is assign your divs a specific class name and they will get a certain functionality. You can find the class names that you need to use on their documentation page.

In Drupal, you can use the Boostrap theme or Zurb Foundation theme to build on top off. These themes have done some of the work for you. Ex: assign all the buttons the proper button classes using a preprocess function.

Here are specific tutorials regarding your question:

Bootstrap 3 Tutorials - #2 - Responsive Collapsing Navbar

Zurb Foundation | Top-Bar Tutorial


If you are using Bootstrap Framework then take the Theme Aegan for example, In this theme it well handle the multi-level menu and also would support for mobile menu, Take it as inspiration it would help to create better menu for you.

And also see my blog it explain to create mobile multi-level menu in drupal 8

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.