How to add a css class to a menu-item for a specific resource

Support Extras
1

This generates my menu:

[[pdoMenu?
    &parents=`0`
    &level=`3`
    &outerClass=`sparkNav__list sparkNav__list--level0 sparkNav__list--active`
    &innerClass=`sparkNav__list sparkNav__list--level[[+level]]`
    &parentClass=`sparkNav__item--hasSub`
    &firstClass=`sparkNav__item--first`
    &hereClass=`sparkNav__item--active`
    &selfClass=`sparkNav__item--current`
    &webLinkClass=`[[+level:is=`1`:then=`sparkNav__item--button`]]`
    &rowClass=`sparkNav__item`
    &tpl=`@INLINE <li[[+classes]]><a href="[[+link]]" class="sparkNav__link" [[+attributes]]>[[+menutitle]]</a></li>`
    &tplParentRow=`@INLINE <li[[+classes]]><p class="sparkNav__link" [[+attributes]]>[[+menutitle]]</p>[[+wrapper]]</li>`
]]

Just for one specific resource (id:123) I want to add an extra class ‘hideTill1024’ to the corresponding menu item.

2

I think you could just use an output modifier in your template - and use [[+classnames]] instead of [[+classes]]

So instead of:

&tpl=`@INLINE <li[[+classes]]><a href="[[+link]]" class="sparkNav__link" [[+attributes]]>[[+menutitle]]</a></li>`

Try this:

&tpl=`@INLINE <li class="[[+classnames]] [[+id:is=`123`:then=` hideTill2024 `]]"><a href="[[+link]]" class="sparkNav__link" [[+attributes]]>[[+menutitle]]</a></li>`

Untested but might get you on the right track!

1 Like
3

Thanks, that does add the className but not to the menu-item corresponding to the resource id. It is being added to the first menu item instead.
Perplexity.ai came up with a similar solution using an output modifier but that yielded the same result: classname on the first menu item.
It looks like the output modifier isn’t working as expected within this pdoMenu call.

4

I found a solution: using [[+attributes]].
Setting a value to the attributes field of the resource with id 123, it is output on the link in the menu item, which in turn I can use as a css selector i.s.o. a className.

1 Like
5

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.