18F/web-design-standards

{% set sidenav_settings = {
  "aria_label": "Secondary navigation",
  "items": [
    {
      "label": "Parent link",
      "current": false
    },
    {
      "label": "Current page",
      "current": true,
      "subnav": [
        {
          "label": "Child link"
        },
        {
          "label": "Child link",
          "current": true,
          "subnav": [
            {
              "label": "Grandchild link"
            },
            {
              "label": "Grandchild link",
              "current": true
            },
            {
              "label": "Grandchild link"
            }
          ]
        },
        {
          "label": "Child link"
        }
      ]
    },
    {
      "label": "Parent link",
      "current": false
    }
  ]
}%}

{% set desktop_sidenav_classes = "display-none desktop:display-block desktop:grid-col-3" %}

{# If true, revert to the old single sidenav behavior. #}
{% if sidenav_reorder %}
  {% set desktop_sidenav_classes = "" %}
{% endif %}

<div class="usa-section">
  <div class="grid-container">
    <div class="grid-row grid-gap">
      <div class="usa-layout-docs__sidenav {{ desktop_sidenav_classes }}">
        {% include "@components/usa-sidenav/src/usa-sidenav.twig" with sidenav_settings %}
      </div>

      <main class="desktop:grid-col-9 usa-prose" id="main-content">
        {% if sidenav_reorder %}
          <style>
            .usa-layout-docs__sidenav {
              outline: 1px dashed orange;
            }
          </style>

          Ensure <code>$theme-sidenav-reorder: true</code> in theme settings & in StorybookJS. The sidenav will be placed <em>after</em> main content and a compile warning should display.
        {% endif %}

        <h1>Page heading (h1)</h1>
        <p class="usa-intro">The page heading communicates the main focus of the page. Make your page heading descriptive and keep it succinct.</p>
        <h2 id="section-heading-h2">Section heading (h2)</h2>
        <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
        <h3 id="section-heading-h3">Subsection heading (h3)</h3>
        <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>
        <p>Keep each section and subsection focused — a good approach is to include one theme (topic) per section.</p>
        <h4 id="section-heading-h4">Subsection heading (h4)</h4>
        <p>Use the side navigation menu to help your users quickly skip to different sections of your page. The menu is best suited to displaying a hierarchy with one to three levels and, as we mentioned, to display the sub-navigation of a given page.</p>
        <p>Read the full documentation on our side navigation on the component page.</p>
      </main>
    </div>

    {# Hide additional sidenav if we're using pre-3.8.0 behavior. #}
    {% if not sidenav_reorder %}
    <div class="usa-layout-docs__sidenav desktop:display-none">
      {% include "@components/usa-sidenav/src/usa-sidenav.twig" with sidenav_settings %}
    </div>
    {% endif %}
  </div>
</div>