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.

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.
alwaysShowLabelbooleanNotrueFlag to always show the label when using `expandable`
aria-labelstringNotypeof label === 'string' ? label : nullAria-label to add to nav element. Defaults to label.
childrenReact.ReactNodeNoChildren nodes
classNamestringNoClass for nav
expandable{ default?: 'expandable' | 'nonExpandable'; sm?: 'expandable' | 'nonExpandable'; md?: 'expandable' | 'nonExpandable'; lg?: 'expandable' | 'nonExpandable'; xl?: 'expandable' | 'nonExpandable'; '2xl'?: 'expandable' | 'nonExpandable'; }NoWhen to collapse/expand at different breakpoints
isCenteredbooleanNoWhether to center children.
isExpandedbooleanNofalseOn mobile whether or not the JumpLinks starts out expanded
isVerticalbooleanNoWhether the layout of children is vertical or horizontal.
labelReact.ReactNodeNoLabel to add to nav element.
offsetnumberNo0Offset to add to `scrollPosition`, potentially for a masthead which content scrolls under.
scrollableSelectorstringNoSelector for the scrollable element to spy on. Not passing a selector disables spying.
toggleAriaLabelstringNo'Toggle jump links'Aria label for expandable toggle

JumpLinksItem

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoText to be rendered inside span
classNamestringNoClass to add to li
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