How do I add a css class to a menu list item using Liquid?

[dondis33004101]

So I copied this liquid logic code that was taken straight from the BC Docs.

<ul>

    {% if menu1.items -%}

    {% for i in menu1.items -%}

    <li><a href="{{i.url}}">{{i.label}}</a>

    {% if i.items -%}

    <ul>

        {% for j in i.items -%}

        <li><a href="{{j.url}}">{{j.label}}</a>

        {% if j.items -%}

        <ul>

            {% for k in j.items -%}

            <li>

            <a href="{{k.url}}">{{k.label}}</a>

            </li>

            {% endfor -%}

        </ul>

        {% endif -%}

        </li>

        {% endfor -%}

    </ul>

    {% endif -%}

    </li>

    {% endfor -%}

    {% endif -%}

</ul>

In this code, I would like to simply add a class to the <li> tag.

{{css}}

The Adobe BC docs do not make it clear where or how this tag is implemented.

The source code renders out the actual liquid tag, even if I wrap it in a class="{{CSS}}"

What is the proper way to add a class to this code sample by Adobe? Thank you for your help.

[Liam Dilley]

Hey there,

You see how you got k.url and j.url (Not good naming conventions by the way, those will only confuse you. Instead of j  for example you could say level1. Etc.

So with j.url that means that items url. CSS means nothing, CSS to what? j.css though means - j's css.

Liquid is Data there is no html markup either so lets say you added a css class in the menu in the admin of "myclas".

If you just output as in your current code you would have..

<li myclass>

From:

<li {{j.css}}>

So you need to have:

<li class="{{j.css}}">

And of course add the classes into the menu.

[dondis33004101]

Thank you for clearing things up!

[dondis33004101]

Hi Liam, one more question for you.

When I use the {module_menu menuID="ID" version="1" render="collection" collection=" my_custom_collection_name" template="/folder/template.tpl"}.

I have to manually enter in the ID number. I am use to just adding the name of the menu instead of using the ID number. I use to name all of my menu's the same name as my page, and then insert the pagename or pagetitle module. Now I have add a ID number.

How do I dynamically change the ID number without writing a duplicating the same menu code or using a JS custom function? I'm trying to limit as much JS functions as possible. 

Thanks again!

[Liam Dilley]

- You want to be using version 2 of menu modules.

- If you are using a template you do not need collection="" unless you are using that data object right after the module

- Menu module does not support the named ID feature, it only accepts the id.