Skip to content
Patternfly Logo

Jump links

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

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