|

   Veteran Tools Platform - Developer Documentation

Side navigation

There are no notes for this item.

PropRequired?TypeDefaultDescription
<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>
 
{% macro nav_list(links, subclass) %}
  {% for item in links %}
  <li>
    <a href="{{ item.href }}"{% if item.current %} class="usa-current"{% endif %}>
      {{ item.text }}
    </a>
    {% if item.current and item.links %}
    <ul class="{{ subclass }}">
      {{ nav_list(item.links, subclass) }}
    </ul>
    {% endif %}
  </li>
  {% endfor %}
{% endmacro %}

<ul class="usa-sidenav-list">
  {{ nav_list(sidenav.links, 'usa-sidenav-sub_list') }}
</ul>
 
package:
  name: department-of-veteran-affairs/jean-pants
  version: 0.1.0
assetPath: /design-system/
isProduction: true
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