Integral Vision

Our thoughts on stuff.

Follow publication

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

Tamás Hajas
Integral Vision
Published in
1 min readApr 29, 2016

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!

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Tamás Hajas
Tamás Hajas

Written by Tamás Hajas

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

Responses (7)

Write a response