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.

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

*required
NameTypeDefaultDescription
activeIndexnumber0The index of the child Jump link to make active.
alwaysShowLabelbooleantrueFlag to always show the label when using `expandable`
aria-labelstringtypeof label === 'string' ? label : nullAria-label to add to nav element. Defaults to label.
childrenReact.ReactNodeChildren nodes
classNamestringClass for nav
expandable{ default?: 'expandable' | 'nonExpandable'; sm?: 'expandable' | 'nonExpandable'; md?: 'expandable' | 'nonExpandable'; lg?: 'expandable' | 'nonExpandable'; xl?: 'expandable' | 'nonExpandable'; '2xl'?: 'expandable' | 'nonExpandable'; }When to collapse/expand at different breakpoints
isCenteredbooleanWhether to center children.
isExpandedbooleanfalseOn mobile whether or not the JumpLinks starts out expanded
isVerticalbooleanWhether the layout of children is vertical or horizontal.
labelReact.ReactNodeLabel to add to nav element.
offsetnumber0Offset to add to `scrollPosition`, potentially for a masthead which content scrolls under.
scrollableSelectorstringSelector for the scrollable element to spy on. Not passing a selector disables spying.
toggleAriaLabelstring'Toggle jump links'Aria label for expandable toggle

JumpLinksItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodeText to be rendered inside span
classNamestringClass to add to li
hrefstringHref for this link
isActivebooleanWhether this item is active. Parent JumpLinks component sets this when passed a `scrollableSelector`.
nodestring | HTMLElementSelector or HTMLElement to spy on
onClick(ev: React.MouseEvent<HTMLAnchorElement>) => voidClick handler for anchor tag. Parent JumpLinks components tap into this.

View source on GitHub