Dust recursive foundation top bar

Question

I am trying to create foundation top bar using dust+json.

Here is my json data:

{
    "label": "More Information",
    "links": [{
        "href": "/Link1",
        "name": "Link 1"
    },
    {
        "href": "/Link2",
        "name": "Link 2"
    },
    {
        "href": "",
        "name": "Link 3",
        "links": [{
            "href": "/Link31",
            "name": "Link 3-1"
        },
        {
            "href": "/Link32",
            "name": "Link 3-2"
        },
        {
            "href": "/Link33",
            "name": "Link 3-3"
        },
        {
            "href": "/Link34",
            "name": "Link 3-4"
        }]
    },
    {
        "href": "/Link4",
        "name": "Link 4"
    },
    {
        "href": "/Link5",
        "name": "Link 5"
    },
    {
        "href": "/Link6",
        "name": "Link 6"
    },
    {
        "href": "/Link7",
        "name": "Link 7"
    }]
}

This is the html result

    <ul class="right">
      <li>
        <a href="/Link1">Link 1</a>
      </li>
      <li>
        <a href="/Link2">Link 2</a>
      </li>
      <li class="has-dropdown">
        <a href="">Link 3</a>
        <ul class="dropdown">
          <li>
            <a href="/Link31">Link 3-1</a>
          </li>
          <li>
            <a href="/Link32">Link 3-2</a>
          </li>
          <li>
            <a href="/Link33">Link 3-3</a>
          </li>
          <li>
            <a href="/Link34">Link 3-4</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="/Link4">Link 4</a>
      </li>
      <li>
        <a href="/Link5">Link 5</a>
      </li>
      <li>
        <a href="/Link6">Link 6</a>
      </li>
      <li>
        <a href="/Link7">Link 7</a>
      </li>
    </ul>  

I have looked at following thread, however, I am not able to figure out how to implement that.

How do I implement recursion in dust template?

Answer 1

Okay, i found answer on following link Recursive dust template

This template

    {<create_nav}
      {^.links}
        <li><a href='{href}'>{name}</a></li>
      {:else}
        <li class='has-dropdown'>
          <a href='{href}' >{title}</a>
          <ul class='dropdown'>
            {#links}{+create_nav/}{/links}
          </ul>
        </li>
      {/links}
    {/create_nav}
    <ul class="right">
      {#links}
        {+create_nav/}
      {/links}
    </ul>

Thanks