{assign var='ul1' value=$ul1|default:'nav'}
{assign var='ul2' value=$ul2|default:'level-1'}
{assign var='ul3' value=$ul3|default:'level-2'}
{assign var='ul4' value=$ul3|default:'level-3'}

{foreach from=$index item=page}
  <ul class="{$ul1}">

    {foreach from=$page.children item=page}

        {navItem page=$page level=$ul2 active=$id}
          {if $page.children}
            <ul class="{$ul2}">
            {foreach from=$page.children item=page}

              {navItem page=$page active=$id arrow=1}
                {if $page.children}
                  <ul class="{$ul3}">
                  {foreach from=$page.children item=page}
                    {navItem page=$page active=$id bullet=1}
                      {if $page.children}
                        <span class='more-toggle'></span>
                        <ul class="{$ul4}">
                          {foreach from=$page.children item=page}

                            {navItem page=$page active=$id}</li>

                          {/foreach}
                          </ul>
                        {/if}

                    </li>

                  {/foreach}
                  </ul>
                {/if}
              </li>

            {/foreach}
            </ul>
        {/if}
      </li>

    {/foreach}
  </ul>
{/foreach}