<section class="usa-grid">

    <div class="usa-width-one-third">
        <h6 class="usa-heading-alt">1 level</h6>

        <ul class="usa-sidenav-list">

            <li>
                <a href="" class="usa-current">
      Current page
    </a>

            </li>

            <li>
                <a href="">
      Parent link
    </a>

            </li>

            <li>
                <a href="">
      Parent link
    </a>

            </li>

        </ul>

    </div>

    <div class="usa-width-one-third">
        <h6 class="usa-heading-alt">2 levels</h6>

        <ul class="usa-sidenav-list">

            <li>
                <a href="">
      Parent link
    </a>

            </li>

            <li>
                <a href="" class="usa-current">
      Current page
    </a>

                <ul class="usa-sidenav-sub_list">

                    <li>
                        <a href="">
      Child link
    </a>

                    </li>

                    <li>
                        <a href="">
      Child link
    </a>

                    </li>

                    <li>
                        <a href="">
      Child link
    </a>

                    </li>

                </ul>

            </li>

            <li>
                <a href="">
      Another link
    </a>

            </li>

        </ul>

    </div>

    <div class="usa-width-one-third">
        <h6 class="usa-heading-alt">3 levels</h6>

        <ul class="usa-sidenav-list">

            <li>
                <a href="">
      Parent link
    </a>

            </li>

            <li>
                <a href="" class="usa-current">
      Current page
    </a>

                <ul class="usa-sidenav-sub_list">

                    <li>
                        <a href="">
      Child link
    </a>

                    </li>

                    <li>
                        <a href="" class="usa-current">
      Child link
    </a>

                        <ul class="usa-sidenav-sub_list">

                            <li>
                                <a href="">
      Grandchild link
    </a>

                            </li>

                            <li>
                                <a href="">
      Grandchild link
    </a>

                            </li>

                            <li>
                                <a href="" class="usa-current">
      Grandchild link
    </a>

                            </li>

                            <li>
                                <a href="">
      Grandchild link
    </a>

                            </li>

                        </ul>

                    </li>

                    <li>
                        <a href="">
      Child link
    </a>

                    </li>

                    <li>
                        <a href="">
      Child link
    </a>

                    </li>

                    <li>
                        <a href="">
      Child link
    </a>

                    </li>

                </ul>

            </li>

            <li>
                <a href="">
      Another link
    </a>

            </li>

        </ul>

    </div>

</section>

There are no notes for this item.

<section class="usa-grid">
{% for nav in sidenavs %}
  <div class="usa-width-one-third">
    <h6 class="usa-heading-alt">{{ nav.title }}</h6>
    {% render '@sidenav--default', {sidenav: nav} %}
  </div>
{% endfor %}
</section>
package:
  name: uswds
  version: 1.4.1
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: Another link
sidenavs:
  - title: 1 level
    links:
      - text: Current page
        current: true
      - text: Parent link
      - text: Parent link
  - title: 2 levels
    links:
      - text: Parent link
      - text: Current page
        current: true
        links:
          - text: Child link
          - text: Child link
          - text: Child link
      - text: Another link
  - title: 3 levels
    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: Another link