Drupal 8 Twig: add custom CSS classes to menus (based on menu name)

Tamás Hajas
Apr 29, 2016 · 1 min read

Twig templates of Drupal 8 makes our life much easier when we want to customize the HTML output. But when the goal is to change a Drupal 8 menu we have to use the menu.html.twig template which is not the most friendly one and it’s customization can be tricky because of several reasons. So I wanna show you how I did it.

Goal

Change the HTML output from this…

HTML output sample of a Drupal 8 menu without using any template / base theme

…to this…

Drupal 8 menu HTML has BEM style CSS classes when we use our own menu.html.twig template

…so we can keep our CSS specificity low and our CSS component easy to write and maintain.

Let’s start it!

Originally I published this article here on Medium. But later I decided to move it to my own blog. You can continue reading at thamas.hu!

Integral Vision

Our thoughts on stuff.

Integral Vision

Our thoughts on stuff.

Tamás Hajas

Written by

Dad. Husband. Guitar Player. Front-end Developer.

Integral Vision

Our thoughts on stuff.