Skip to content
Patternfly Logo

Info alert:Beta feature

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

Examples

These examples are static because they have no element to scroll spy on that makes sense. Check out the React demos to see scroll spying in action!

Vertical with label

Props

NameTypeRequiredDefaultDescription
activeIndexnumberNo0The index of the child Jump link to make active.
aria-labelstringNotypeof label === 'string' ? label : nullAria-label to add to nav element. Defaults to label.
childrenReact.ReactNodeNoChildren nodes
isCenteredbooleanNoWhether to center children.
isVerticalbooleanNoWhether the layout of children is vertical or horizontal.
labelReact.ReactNodeNoLabel to add to nav element.
scrollableSelectorstringNoSelector for the scrollable element to spy on. Not passing a selector disables spying.

JumpLinksItem

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoText to be rendered inside span
hrefstringNoHref for this link
isActivebooleanNoWhether this item is active. Parent JumpLinks component sets this when passed a `scrollableSelector`.
nodestring | HTMLElementNoSelector or HTMLElement to spy on
onClick(ev: React.MouseEvent<HTMLAnchorElement>) => voidNoClick handler for anchor tag. Parent JumpLinks components tap into this.

View source on GitHub