{% component "menu"
     selected_item=this.page.title|lower
     selected_item_class="active"
     before_menu='<nav id="%3$s" class="%4$s"><ul>'
     after_menu='</ul></nav>'
     before_item="<li>"
     before_url_item_label='<a href="%1$s" title="%6$s" target="%7$s">'
     before_nourl_item_label='<a href="" title="%6$s">'
%}

It works fine except for adding active class. What is wrong?

It's working fine for me.

Firstly dump out your selected_item so you know exactly what you're trying to pass to the component:

{{ this.page.title|lower }}

Now make sure you have an item with a Selected Item ID that matches this value:

Next up, you've actively removed the class_attrib bit from your before_item list element - so your menu can't show the active class even if you're passing the correct selected_item. You want something like this:

{% component "menu"
     selected_item='myblog'
     selected_item_class="active"
     before_menu='<nav id="%3$s" class="%4$s"><ul>'
     after_menu='</ul></nav>'
     before_item='<li class="%3$s">'
     before_url_item_label='<a href="%1$s" title="%6$s" target="%7$s">'
     before_nourl_item_label='<a href="" title="%6$s">'
%}

Last updated 9 years ago

Ouch, sorry. I didn't know I have to do this. Thank you!