NJ Web Design System (v1.0.0)

Side navigation: Default 

<nav aria-label="Secondary navigation">
    <ul class="usa-sidenav">
        <li class="usa-sidenav__item">
            <a href="">Parent link</a>
        </li>
        <li class="usa-sidenav__item">
            <a href="" class="usa-current">Current page</a>
            <ul class="usa-sidenav__sublist">
                <li class="usa-sidenav__item">
                    <a href="">Child link</a>
                </li>
                <li class="usa-sidenav__item">
                    <a href="" class="usa-current">Child link</a>
                    <ul class="usa-sidenav__sublist">
                        <li class="usa-sidenav__item">
                            <a href="">Grandchild link</a>
                        </li>
                        <li class="usa-sidenav__item">
                            <a href="">Grandchild link</a>
                        </li>
                        <li class="usa-sidenav__item">
                            <a href="" class="usa-current">Grandchild link</a>
                        </li>
                        <li class="usa-sidenav__item">
                            <a href="">Grandchild link</a>
                        </li>
                    </ul>
                </li>
                <li class="usa-sidenav__item">
                    <a href="">Child link</a>
                </li>
                <li class="usa-sidenav__item">
                    <a href="">Child link</a>
                </li>
                <li class="usa-sidenav__item">
                    <a href="">Child link</a>
                </li>
            </ul>
        </li>
        <li class="usa-sidenav__item">
            <a href="">Parent link</a>
        </li>
    </ul>
</nav>

No notes defined.

{%- macro nav_list(links, subclass) -%}
  {%- for item in links -%}
  <li class="usa-sidenav__item">
    <a href="{{ item.href }}"{% if item.current %} class="usa-current"{% endif %}>{{ item.text }}</a>
    {%- if item.links -%}
    <ul class="{{ subclass }}">
      {{ nav_list(item.links, subclass) }}
    </ul>
    {%- endif %}
  </li>
  {%- endfor -%}
{%- endmacro -%}

<nav aria-label="Secondary navigation">
  <ul class="usa-sidenav">
    {{ nav_list(sidenav.links, 'usa-sidenav__sublist') }}
  </ul>
</nav>
 
package:
  name: null
  version: 1.0.0
uswds:
  path: ../../dist
sidenav:
  links:
    - text: Parent link
    - text: Current page
      current: true
      links:
        - text: Child link
        - text: Child link
          current: true
          links:
            - text: Grandchild link
            - text: Grandchild link
            - text: Grandchild link
              current: true
            - text: Grandchild link
        - text: Child link
        - text: Child link
        - text: Child link
    - text: Parent link