Components

In-page navigation

The in-page navigation allows navigation to specific sections on a lengthy content page

About the in-page navigation component

In-page navigation helps users understand the contents of a page and navigate to the section they need to read. This component is most suited for lengthy pages. The component is displayed alongside the main content in a sticky container that remains fixed when the user scrolls. When a user clicks an item on the in-page navigation, the page smoothly scrolls to the target section.

The USWDS in-page navigation component generates its content automatically, based on the content of the main element of the page. It utilizes the Intersection Observer API which provides a performant, future-proof way of assuring that the navigation highlights the current section visible in the viewport.

An in-page navigation component in the three states: default, hover, and focus. In the active state, the nav link is underlined. In the focus state, the nav link is underlined and has a focus border surrounding it. Demo In-page navigation 
<div class="usa-in-page-nav-container">
  <aside
    class="usa-in-page-nav"
    data-title-text="On this page"
    data-title-heading-level="h4"
    data-scroll-offset="0"
    data-root-margin="0px 0px 0px 0px"
    data-threshold="1"
  ></aside>
  <main id="main-content" class="main-content usa-prose">
    <h1>Sample in-page navigation page</h1>
    <h2>Lorem ipsum dolor</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <h2>Consectetuer adipiscing elit</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <h3>Nullam sit amet enim</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <h3>Vivamus pharetra posuere sapien</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <h3>Suspendisse id velit</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <h3>Orci magna rhoncus neque</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <h2>Aliquam erat volutpat: velit vitae ligula volutpat</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <h3>Vitae ligula</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
      gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
      orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
      amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
      erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
      pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
      adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
      rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
      Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
      volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
      posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
      pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
      vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
      Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
      dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
      pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
      turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
  </main>
</div>

Guidance

When to use the in-page navigation component

  • Long pages. In-page navigation can offer a substantial improvement to user experience for pages that include three or more distinct content sections or content that exceeds three or more viewport heights.

When to consider something else

  • Short pages. For pages that require little or no scrolling, in-page navigation is not necessary.
  • Unstructured content. Pages that lack hierarchical structures (h2 and h3 elements in the main) cannot use the in-page navigation component.
  • Infinite scrolling. For pages that feature infinite scrolling, in-page navigation is neither a practical nor feasible feature.

Usability guidance

  • Display the in-page navigation to the side of the main content. Visually, place the in-page navigation component after the main content in the language’s natural reading order. For example, for a left-to-right language like English, this component goes to the right of the main content.

  • Make it stand out. Site visitors should be able to quickly and easily distinguish in-page navigation from other landmarks on the page. Include borders and well-defined link active states to clearly convey the utility and purpose of the section. Define a consistent width for the in-page navigation component that is sufficiently wide and does not change based on text length.

  • Use language that matches section headings. The text of the links displayed within the in-page navigation aside should match the heading text of the target sections. Our component scans the page for h2 and h3 elements within the main element, automatically creates the in-page navigation block, and dynamically inserts the text to match the section headings.

  • Don’t include the page h1 in the navigation. Each page should have a single h1 to describe its contents. It would be redundant to include this heading level in the in-page navigation.

  • In-page navigation heading. Inform users that they will scroll down on the same page by including in-page navigation under a descriptive title such as “On this page,” “In this article,” or “Table of contents.”

Accessibility

  • Allow keyboard navigation. Users should be able to navigate between items by using the Tab key. They should also be able to activate a link when pressing Enter on their keyboard. Users should be able to activate hover and focus states with both a mouse and a keyboard.

  • Keyboard users should access the in-page navigation before the main content. When a user tabs through a page that contains the in-page navigation component, they should find the in-page navigation before the main content. Since the in-page navigation appears after the main content in the reading order, this may seem like a tab-order error. However, tabbing through the entire page before getting to in-page navigation links is not logical, creates confusion, and diminishes the user experience.

  • Set focus state on section target for keyboard users. When keyboard users follow an in-page anchor link set the focus state to the link target when the user presses the Enter key. When mouse users follow an in-page anchor link the focus should remain on the selected link.

Using the in-page navigation component

Implementing the in-page navigation component requires a few additions and adjustments to your page’s markup.

  • A wrapper div with the class usa-in-page-nav-container must surround the main element of your page.

  • A new sibling aside with the class usa-in-page-nav must precede the main element.

    The following is an example of the minimum markup your page would need to implement the in-page navigation component:

    <div class="usa-in-page-nav-container">
  <aside class="usa-in-page-nav"></aside>
  <main id="main-content" class="main-content">
     [ Page content ]
  </main>
</div>
  • Initialization properties. You can customize how the component builds during initialization by adding any of the following properties to the usa-in-page-nav element. These properties must be set before the component is initialized.
  • Custom main content region. The main content selector property (data-main-content-selector) allows you to define which element the component will look in to pull its list of headers. Set the property’s value to the class or id of your page’s main content region (for example, data-main-content-selector=".main-content" or data-main-content-selector="#main-content"). By default, the component will pull headers from the <main> element.
  • Root margin. The root margin property (data-root-margin) is a string that allows you to define the observable area. This set of values grows or shrinks the observable area from each side of the root element’s bounding box before computing intersections. It can accept values similar to the CSS margin property, and can be percentages. By default, the in-page navigation component is set to 0px 0px 0px 0px.
  • Threshold. The threshold property (data-threshold) determines how much of the observable section must be present in the observed area before the nav’s item is set to current. The default is 1, which means 100% of the observables must be in the observed section. You can set data-threshold to any integer between 0 and 1.

In-page navigation initialization properties

Property Description Default

data-main-content-selector

The element the component pulls headers from.

<main>

data-title-heading-level

The heading level of the navigation title header.

h4

data-title-text

The text of the navigation title header.

“On this page”

data-scroll-offset

Number of pixels scroll should offset from the top of the parent element.

0

data-root-margin

Observable margin around the observed root used for calculating the current active section. Use values similar to CSS margin.

0px 0px 0px 0px

data-threshold

Percentage of the scrolling section that must be in the observed area before the current section is triggered. Use a value between 0 and 1.

1

In-page navigation settings

Variable Description
$theme-in-page-nav-background-color

Background color of the in-page navigation block. Default uses body background color set in $theme-body-background-color.
$theme-in-page-nav-background-padding

Padding of the in-page navigation block.
$theme-in-page-nav-background-radius

The border radius of the in-page navigation block.
$theme-in-page-nav-bar-color

Color of the bar representing the active state of a link in the in-page navigation. Default uses the default link settings calculated from your background color.
$theme-in-page-nav-bar-width

Width of the colored bar representing the active state of a link in the in-page navigation.
$theme-in-page-nav-font-family

Font family of the in-page navigation.
$theme-in-page-nav-link-color

The color of the link in the in-page navigation. Default uses the default link settings calculated from your background color.
$theme-in-page-nav-main-content-max-width

Maximum width of the main element.
$theme-in-page-nav-margin-left

Margin to the left of in-page navigation.
$theme-in-page-nav-margin-top

Margin above in-page navigation.
$theme-in-page-nav-top

Distance from top of page to top of navigation when the sticky position is engaged on scroll.

In-page navigation variants

This component has no variants.

References

Package

  • Package usage: @forward "usa-in-page-navigation";

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date USWDS version Affects Breaking Description
2023-08-23 3.6.0
  • JavaScript
 No

Updated JavaScript to exclude headers that have a style of display:none or visibility:hidden from the component link list. More information: uswds#5393

2023-08-23 3.6.0
  • JavaScript
 No

Added the option to designate a custom main content region with the data-main-content-selector attribute. More information: uswds#5387

2023-06-09 3.5.0
  • JavaScript
 No

Fixed a bug that prevented links that start with a number from scrolling when clicked. More information: uswds#5200

2023-03-27 N/A
  • Guidance
 No

Updated the documentation to clarify the component’s recommended display location. More information: uswds-site#2033

2023-03-13 3.4.1
  • JavaScript
  • Styles
 No

URL in address bar is updated when navigating component. Users can now see the proper anchor link in the address bar when navigating from the in-page navigation. More information: uswds#5170

2022-11-14 3.3.0
  • Guidance
  • JavaScript
  • Markup
  • Styles
 No

Component released. More information: uswds#4918