Jump links

Jump links help users navigate to different sections within a single page.

Overview

The jump link component includes the heading “Jump to section” and a list of links that correspond to the H2 headings in the page body. Clicking a link jumps the user to a scroll position with the corresponding heading at the top of their viewport. Always pair jump links with the back to top component.

Desktop

Jump to section heading followed by 11 Page section traditional blue and underlined links

Mobile

Smaller text Jump to section heading followed by 11 Page section traditional blue and underlined links

Usage context

When to use

Jump links should be used when a page contains three or more distinct sections and the content is too long or complex for users to digest quickly while scrolling. Types of pages where jump links make sense include:

Guides
Long articles
Index pages
About pages

Only use the jump links component for anchoring to headers on the same page as the component.

When to use something else

Don’t use jump links on short pages or pages with fewer than three distinct sections.

Never use jump links for linking to anything other than headers on the same page as the component.

Usage guidelines

Jump links should only appear in lists of three or more.

Desktop nyc.gov screenshot showing jump links to the left of content about paying a parking ticket. The jump link header reads "Jump to section." Below are jump links for "Pay ticket" "Dispute ticket" "Check ticket status" "Frequently asked questions" and "Get help"

Desktop nyc.gov screenshot showing incorrect jump link usage to the left of content about paying a parking ticket. The jump link header reads "Jump to section." Below are two jump links for "Pay ticket" and "Frequently asked questions."

Jump link labels can break onto two lines, but never three.

Desktop nyc.gov screenshot showing a long list of jump links. The final jump link "Contact NYC government" is displayed on two lines.

Desktop nyc.gov screenshot showing a long list of jump links. The final link "Contact the government of New York City" is displayed on three lines.

On mobile, jump links are placed directly under the page hero.

On desktop, jump links are placed to the left of the first body section below the hero.

Jump links are only for jumping to headers on the same page as the component. Never use a jump link for linking off-page.

Desktop nyc.gov screenshot showing the "Parking or camera tickets" page. Two jump links "Go to CityPay" and "Download Pay or Dispute App" are annotated as being external links.

Jump links are not sticky. Use the back to top component to allow the user to quickly access the jump links from anywhere on the page.

Desktop nyc.gov screenshot showing the back to top component, a blue arrow in a white circle, in the bottom left of the page body. It is annotated "Back to top component appears once user scrolls past jump links." No jump links are visible.

Default

The Jump Links component can be utilized with a container with the jump-links class, and the following elements:

Header element: h2.jump-links__title
Unordered list: ul: The list should contain list items with anchor links (no external links)

This code is for reference only. The library is currently in beta. Check back for future releases.