Add active-trail class to menu

Question

I am working on a drupal 8 project. I am building menus from drupal. My menu would be like the following structure:

-parent

--child 1

--child 2

--child 3

when i go to a page which is child 3, and the menu will also appear on that page. i would like to set active class on both child 3 and also parent. Is there any way to do so? Thanks.

Answer 1

That happens automatically, at least by default for themes inheriting from Classy. See https://api.drupal.org/api/drupal/core%21themes%21classy%21templates%21navigation%21menu.html.twig/8:

  {%
    set classes = [
      'menu-item',
      item.is_expanded ? 'menu-item--expanded',
      item.is_collapsed ? 'menu-item--collapsed',
      item.in_active_trail ? 'menu-item--active-trail',
    ]
  %}
  <li{{ item.attributes.addClass(classes) }}>

So, make sure you are inheriting from Classy (recommended) or duplicate some of this logic in your theme.