Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

On this page

use: best-practice English, Spanish, Tagalog Web
The On this page jump links component summarizes the sections (<h2>s) at the top of long pages and allows users to jump down the page to the respective section.

Examples

View va-on-this-page in Storybook

Usage

When to use the On this page jump links component

  • Use this component to quickly tell users what information they can get on that page.
  • This component is especially helpful for pages with a lot of content, as it helps users navigate longer pages and provides guideposts that bring users deeper into the content.

When to consider something else

  • Don’t use the On this page jump links if the content on the page isn’t very long. To display this component, the page must have a minimum of two H2 section titles.
  • If the content you want users to see is too far down the page, consider rearranging the content to achieve the desired hierarchy.

How to use the On this page jump links component

  • Keep the first link and its corresponding heading close together, so users can more easily make the connection that the links correspond to the H2 section titles
  • The content on the page must have a minimum of two H2 section titles to use the On this page jump links.
  • On this page jump links component pairs well with the Back to top component. The Back to top component helps users quickly navigate back to the top of long pages of content.

Code usage

Web

Attributes and Properties

Property Attribute Type Default Description disableAnalytics disable-analytics boolean false

If true, analytics event will not be fired

 excludeSelectors exclude-selectors string | string[] []

CSS selectors for H2 elements that should be excluded from the list.

Accepts either a string array property or a JSON string attribute value. For example: exclude-selectors=’[“va-alert h2”, “.my-heading”]’ or excludeSelectors={[“va-alert h2”, “.my-heading”]}

 headerLevel header-level number 2

Header level. Must be between 1 and 6

Events

Name Description component-library-analytics The event used to track usage of the component. This is emitted when the user clicks on a link and enableAnalytics is true.

Accessibility considerations

  • Heading levels should increase only by one. The proper order of heading levels conveys the structure of the page for screen reader users and provides a natural hierarchy for your content. When heading elements are applied correctly, the page becomes much easier for both screen reader and sighted users to navigate.
  • The focus should be on the destination. When a user clicks on an item on the On this page component, the focus should move to the heading that it links to.
  • Allow enough spacing between components. Space should be 1.5 rem (36px) from the bottom of the descender to the top of the ascender.
  • On this page jump links should be contained in a navigation landmark so it can be easily discovered by screen reader users.

Provide feedback

Share your feedback, report issues, or suggest improvements for the On this page component. Your input helps us make the design system better for everyone.

Edit this page in GitHub (Permissions required)
Last updated: Mar 26, 2026