Jump links

Jump links allow users to navigate to sections within a page.


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


activeIndexnumber0The index of the child Jump link to make active.
alwaysShowLabelbooleantrueFlag to always show the label when using `expandable`
aria-labelstringtypeof label === 'string' ? label : nullAdds an accessible label to the internal nav element. Defaults to the value of the label prop.
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.
scrollableRefHTMLElement | (() => HTMLElement) | React.RefObject<HTMLElement>Reference to the scrollable element to spy on. Takes precedence over scrollableSelector. Not passing a scrollableRef or scrollableSelector disables spying.
scrollableSelectorstringSelector for the scrollable element to spy on. Not passing a scrollableSelector or scrollableRef disables spying.
toggleAriaLabelstring'Toggle jump links'Aria label for expandable toggle


hrefrequiredstringHref for this link
childrenReact.ReactNodeText to be rendered inside span
classNamestringClass to add to li
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) => voidClick handler for anchor tag. Parent JumpLinks components tap into this.

View source on GitHub