Need Help With Classes Please

[bgarrant]

How can I add classes to deeper nodes and anchors like you see below?

<ul id="slide-out" class="side-nav">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
<li class="no-padding">
  <ul class="collapsible collapsible-accordion">
    <li>
      <a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
      <div class="collapsible-body">
        <ul>
          <li><a href="#!">First</a></li>
          <li><a href="#!">Second</a></li>
          <li><a href="#!">Third</a></li>
          <li><a href="#!">Fourth</a></li>
        </ul>
      </div>
    </li>
  </ul>
</li>

[bgarrant]

I think a&m can do this but I just need some help with the manual html coding option.

[bgarrant]

I need to output in this format to make this work with Materialize sidnav. Any help is appreciated. I have tried a bunch and can't get it working.

<ul id="slide-out" class="side-nav">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
    <li class="no-padding">
      <ul class="collapsible collapsible-accordion">
        <li>
          <a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
          <div class="collapsible-body">
            <ul>
              <li><a href="#!">First</a></li>
              <li><a href="#!">Second</a></li>
              <li><a href="#!">Third</a></li>
              <li><a href="#!">Fourth</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </li>
  </ul>
  <ul class="right hide-on-med-and-down">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
    <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
    <ul id='dropdown1' class='dropdown-content'>
      <li><a href="#!">First</a></li>
      <li><a href="#!">Second</a></li>
      <li><a href="#!">Third</a></li>
      <li><a href="#!">Fourth</a></li>
    </ul>
  </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>

[bgarrant]

Figured it out I think using this:

        {% macro addPageToNavigation2(page) %}
        {% if page.children is defined %}

        <li class="no-padding">
            <ul id="dropdown-{{ page.id }}-m" class="collapsible collapsible-accordion">
                <li>
                    <a class="collapsible-header">{{ page.name }}<i class="mdi-navigation-arrow-drop-down"></i></a>
                    <div class="collapsible-body">
                        <ul>
                          {% for subpage in page.children %}
                          {{ _self.addPageToNavigation2(subpage) }}
                          {% endfor %}
                        </ul>
                    </div>
                </li>
            </ul>
        </li>
      {% else %}
      <li {% if page.active %} class="active"{% endif %}><a href="{{ page.url }}" title="{{ page.name }}">{{ page.name }}</a></li>
      {% endif %}
      {% endmacro %}