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.

Tamás Hajas

Written by

Dad. Husband. Guitar Player. Front End Drupal Developer at Mirum Budapest.

Integral Vision

Our thoughts on stuff.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade