I would like to add class in li element in menu for drupal 8 for page where I am. For example if i am on page Start, that li have active class. Or If I am on Join page that li element for join have active class.

<ul class="">
<li class="active"><a href="#" >START</a></li>
<li class=""><a href="#" >About</a></li>
<li class=""><a href="#" >join</a></li>

So, How to ask if li is active or no?

{% for item in items %}
  {% if item=SOMETHING %}
    <li class="active">
      <a  href="{{ item.url }}">{{ item.title }}</a>
  {% else %}
    <li >
      <a  href="{{ item.url }}">{{ item.title }}</a>
{% endfor %}
  • try first with css only li a:active { color:red; text-decoration:underline; }
    – No Sssweat
    Feb 18, 2016 at 11:37
  • Soryy I didnt ask question good. :( I would like to add class=active for page where i am.
    – SakaSerbia
    Feb 18, 2016 at 11:50
  • I actually got that, but try my css code to see if it works. (it might auto detect the page you are on and underline the Menu li accordingly)
    – No Sssweat
    Feb 18, 2016 at 11:53
  • Is work but when you click on menu item and muve him prntscr.com/a4tpmy its seem that auto detection dont work.
    – SakaSerbia
    Feb 18, 2016 at 12:03
  • why would anyone do that? you really think your users will do that?
    – No Sssweat
    Feb 18, 2016 at 12:10

2 Answers 2


To add active class to <li> need to add the following code in your .theme file and menu.html.twig

In .theme file add this

function themename_preprocess_menu(&$variables, $hook) {
  if ($hook == 'menu__main') { // If it is not working replace "main__menu" with "menu"

    // Get the current path.
    $current_path = \Drupal::request()->getRequestUri();
    $items = $variables['items'];
    foreach ($items as $key => $item) {
      // If path is current_path, set active to li.
      if ($item['url']->toString() == $current_path) {
      // Add active link.
      $variables['items'][$key]['attributes']['class'] = 'active';

In menu.html.twig replace your <li> with below line.

replace this line

{{ link(item.title, item.url) }}


<li {{ item.attributes }} ><a  href="{{ item.url }}"  {{ item.attributes }} > {{ item.title }}</a></li>
  • If doing this you also need to add the current URL to the cache context for the menu, otherwise when caching is enabled the preprocess hook won't actually run for each page. So, e.g. add to the code above: $variables['#cache']['contexts'][] = 'url.path';
    – Tim S
    Nov 11, 2021 at 18:03

It will be better if you programmatically detect the page and apply the class on that condition.You can follow the following steps.

  • Detect the current page ( CODE : For Drupal 7) .

      $path = current_path();
      $path_alias = drupal_lookup_path('alias',$path);
  • Add the if condition matching your page name with that of current page

    if($path_alias == "current-page") { print  "active"; }

This may solve your issue

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.