Skip to content
Patternfly Logo

Jump links

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. Learn more about Beta components here.

Demos

JumpLinks has a scrollspy built-in to make your implementation easier. When implementing JumpLinks be sure to:

  1. Find the correct scrollableSelector for your page via Firefox's debugging scrollable overflow or by adding hasOverflowScroll to a PageSection or PageGroup.
  2. Provide hrefs to your JumpLinksItems which match the id of elements you want to spy on. If you wish to scroll to a different item than you're linking to use the node prop.

Scrollspy with subsections

This demo expands on the previous to show the JumpLinks in a vertical layout with subsections. It scrolls the Page's mainContainerId with an offset of 76px for the masthead. The headings are given a tab index to allow the jump links to focus them.


View source on GitHub