<div class="grid-row grid-gap">
    <div class="tablet:grid-col-4">
        <h6 class="usa-heading-alt">Single level</h6>
        <nav>
            <ul class="usa-sidenav">
                <li class="usa-sidenav__item">
                    <a href="" class="usa-current">Current page</a>
                </li>
                <li class="usa-sidenav__item">
                    <a href="">Parent link</a>
                </li>
                <li class="usa-sidenav__item">
                    <a href="">Parent link</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="tablet:grid-col-4">
        <h6 class="usa-heading-alt">Two levels</h6>
        <nav>
            <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="">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>
                        <li class="usa-sidenav__item">
                            <a href="" class="usa-current">Child link</a>
                        </li>
                    </ul>
                </li>
                <li class="usa-sidenav__item">
                    <a href="">Parent link</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="tablet:grid-col-4">
        <h6 class="usa-heading-alt">Three levels</h6>
        <nav>
            <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="">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>
                            </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>
    </div>
</div>

There are no notes for this item.

<div class="grid-row grid-gap">
  {%- for nav in sidenavs -%}
    <div class="tablet:grid-col-4">
      <h6 class="usa-heading-alt">{{ nav.title }}</h6>
      {%- render '@sidenav--default', {sidenav: nav} -%}
    </div>
  {%- endfor -%}
</div>
package:
  name: uswds
  version: 2.0.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: 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