<main class="usa-grid usa-section usa-content usa-layout-docs" id="main-content">
    <aside class="usa-width-one-fourth usa-layout-docs-sidenav">

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

                </li>

            </ul>
        </nav>

    </aside>

    <div class="usa-width-three-fourths usa-layout-docs-main_content">
        <h1>Page heading (h1)</h1>

        <p class="usa-font-lead">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>
    </div>
</main>

There are no notes for this item.

<main class="usa-grid usa-section usa-content usa-layout-docs" id="main-content">
  <aside class="usa-width-one-fourth usa-layout-docs-sidenav">
    {% render '@sidenav' %}
  </aside>

  <div class="usa-width-three-fourths usa-layout-docs-main_content">
    <h1>Page heading (h1)</h1>

    <p class="usa-font-lead">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>
  </div>
</main>
package:
  name: uswds
  version: 1.6.7
uswds:
  path: ../../dist
header:
  primary:
    search: null
    links:
      - text: Sections
        id: nav-section-one
        links:
          - text: Section heading (h2)
            href: '#section-heading-h2'
          - text: Subsection heading (h3)
            href: '#section-heading-h3'
          - text: Subsection heading (h4)
            href: '#section-heading-h4'