Skip to content
Patternfly Logo

Jump links

Jump links allow users to navigate to sections within a page.

Usage

Jump links provide a way to navigate through section headings on a page without scrolling. The highlighted active section changes as the user scrolls to the next section.

Elements

Elements of a jump link
  1. Active section: current section of the page the user is on.

  2. Inactive section: other sections of the page that the user is not currently on. Clicking on an inactive section will bring the user to the selected section and make the section active.

Variations

Jump links can be displayed either horizontally or vertically. They can include optional subsections.

As the user scrolls down the page, the active sections are highlighted from left to right. A jump link can be displayed left aligned or center aligned and with an optional label.

Example of horizontal jump link

As the user scrolls down the page, the active sections are highlighted from top to bottom.

Example of vertical jump link

If the page has subsections, they are shown as indented jump links under the parent section. Subsections can be individually selected.

Example of jump links with subsections

On smaller screen sizes, jump links collapse into an expandable component that is shown above the content. This component can be expanded to display the jump links.

Example jump link in a mobile format
View source on GitHub