<section class="usa-grid">

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

        <nav>
            <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>
        </nav>

    </div>

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

        <nav>
            <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>

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

                        </li>

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

                        </li>

                    </ul>

                </li>

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

                </li>

            </ul>
        </nav>

    </div>

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

        <nav>
            <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>

                            <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>

                            </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="">
      Parent link
    </a>

                </li>

            </ul>
        </nav>

    </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.6.8
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
sidenavs:
  - title: Single level
    links:
      - text: Current page
        current: true
      - text: Parent link
      - text: Parent link
  - title: Two levels
    links:
      - text: Parent link
      - text: Current page
        current: true
        links:
          - text: Child link
          - text: Child link
          - text: Child link
          - text: Child link
          - text: Child link
            current: true
      - text: Parent link
  - title: Three levels
    links:
      - text: Parent link
      - text: Current page
        current: true
        links:
          - text: Child link
          - text: Child link
            links:
              - text: Grandchild link
              - text: Grandchild link
              - text: Grandchild link
                current: true
          - text: Child link
          - text: Child link
          - text: Child link
      - text: Parent link