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.
scrollableSelectorstringSelector for the scrollable element to spy on. Not passing a selector disables spying.
toggleAriaLabelstring'Toggle jump links'Aria label for expandable toggle


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