Jump links

When clicked, jump links allow users to navigate to sections within a page without scrolling.

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 : 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

JumpLinksItem

*required
NameTypeDefaultDescription
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.