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!
Props
JumpLinks
| Name | Type | Default | Description |
|---|---|---|---|
| activeIndex | number | 0 | The index of the child Jump link to make active. |
| alwaysShowLabel | boolean | true | Flag to always show the label when using `expandable` |
| aria-label | string | typeof label === 'string' ? label : null | Adds an accessible label to the internal nav element. Defaults to the value of the label prop. |
| children | React.ReactNode | Children nodes | |
| className | string | Class 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 | |
| isCentered | boolean | Whether to center children. | |
| isExpanded | boolean | false | On mobile whether or not the JumpLinks starts out expanded |
| isVertical | boolean | Whether the layout of children is vertical or horizontal. | |
| label | React.ReactNode | Label to add to nav element. | |
| offset | number | 0 | Offset to add to `scrollPosition`, potentially for a masthead which content scrolls under. |
| scrollableRef | HTMLElement | (() => HTMLElement) | React.RefObject<HTMLElement> | Reference to the scrollable element to spy on. Takes precedence over scrollableSelector. Not passing a scrollableRef or scrollableSelector disables spying. | |
| scrollableSelector | string | Selector for the scrollable element to spy on. Not passing a scrollableSelector or scrollableRef disables spying. | |
| toggleAriaLabel | string | 'Toggle jump links' | Aria label for expandable toggle |
JumpLinksItem
| Name | Type | Default | Description |
|---|---|---|---|
| hrefrequired | string | Href for this link | |
| children | React.ReactNode | Text to be rendered inside span | |
| className | string | Class to add to li | |
| isActive | boolean | Whether this item is active. Parent JumpLinks component sets this when passed a `scrollableSelector`. | |
| node | string | HTMLElement | Selector or HTMLElement to spy on | |
| onClick | (ev: React.MouseEvent) => void | Click handler for anchor tag. Parent JumpLinks components tap into this. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list--Display | flex | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list--PaddingBlockStart | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list--PaddingBlockEnd | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links--m-vertical__list--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links--m-vertical__list--PaddingInlineEnd | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links--m-vertical__list--PaddingInlineStart | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list--FlexDirection | row | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links--m-vertical__list--FlexDirection | column | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list--before--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list--before--BorderBlockStartWidth | 1px | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list--before--BorderInlineEndWidth | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list--before--BorderBlockEndWidth | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list--before--BorderInlineStartWidth | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth | 1px | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links--m-vertical__list--before--BorderBlockStartWidth | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list__list--MarginBlockStart | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__link--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__link--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__link--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__link--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list__list__link--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list__list__link--PaddingInlineStart | 1.5rem | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__list__list__link--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__link--OutlineOffset | calc(-1 * 0.5rem) | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__link--before--BorderBlockStartWidth | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__link--before--BorderInlineEndWidth | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__link--before--BorderBlockEndWidth | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__link--before--BorderInlineStartWidth | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__link--before--BorderColor | transparent | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth | 3px | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__item--m-current__link--before--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth | 3px | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__link-text--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__link--hover__link-text--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__item--m-current__link-text--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__label--MarginBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__label--Display | block | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__toggle--MarginBlockEnd | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__toggle--Display | none | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__toggle-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__toggle-icon--TransitionDuration | 200ms | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction | cubic-bezier(.4, 0, .2, 1) | ||
| ||||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links__toggle-icon--Rotate | 0 | ||
| .pf-v6-c-jump-links | --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate | 90deg | ||
| .pf-v6-c-jump-links.pf-m-vertical | --pf-v6-c-jump-links__list--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-jump-links.pf-m-vertical | --pf-v6-c-jump-links__list--PaddingInlineEnd | 0 | ||
| ||||
| .pf-v6-c-jump-links.pf-m-vertical | --pf-v6-c-jump-links__list--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-jump-links.pf-m-vertical | --pf-v6-c-jump-links__list--PaddingInlineStart | 0 | ||
| ||||
| .pf-v6-c-jump-links.pf-m-vertical | --pf-v6-c-jump-links__list--before--BorderBlockStartWidth | 0 | ||
| ||||
| .pf-v6-c-jump-links.pf-m-vertical | --pf-v6-c-jump-links__list--before--BorderInlineStartWidth | 1px | ||
| ||||
| .pf-v6-c-jump-links.pf-m-vertical | --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth | 0 | ||
| ||||
| .pf-v6-c-jump-links.pf-m-vertical | --pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth | 3px | ||
| ||||
| .pf-v6-c-jump-links.pf-m-vertical | --pf-v6-c-jump-links__list--FlexDirection | column | ||
| ||||
| .pf-v6-c-jump-links.pf-m-expandable | --pf-v6-c-jump-links__list--Display | none | ||
| .pf-v6-c-jump-links.pf-m-expandable | --pf-v6-c-jump-links__toggle--Display | block | ||
| .pf-v6-c-jump-links.pf-m-expandable | --pf-v6-c-jump-links__label--Display | none | ||
| .pf-v6-c-jump-links.pf-m-non-expandable | --pf-v6-c-jump-links__list--Display | flex | ||
| .pf-v6-c-jump-links.pf-m-non-expandable | --pf-v6-c-jump-links__toggle--Display | none | ||
| .pf-v6-c-jump-links.pf-m-non-expandable | --pf-v6-c-jump-links__label--Display | block | ||
| .pf-v6-c-jump-links.pf-m-expanded | --pf-v6-c-jump-links__list--Display | flex | ||
| .pf-v6-c-jump-links.pf-m-expanded | --pf-v6-c-jump-links__toggle--MarginBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-jump-links.pf-m-expanded | --pf-v6-c-jump-links__toggle-icon--Rotate | 90deg | ||
| ||||
| .pf-v6-c-jump-links.pf-m-expanded | --pf-v6-c-jump-links__toggle-icon--Color | undefined | ||
| ||||
| .pf-v6-c-jump-links__list .pf-v6-c-jump-links__list | --pf-v6-c-jump-links__list--PaddingBlockStart | 0 | ||
| .pf-v6-c-jump-links__list .pf-v6-c-jump-links__list | --pf-v6-c-jump-links__list--PaddingBlockEnd | 0 | ||
| .pf-v6-c-jump-links__list .pf-v6-c-jump-links__list | --pf-v6-c-jump-links__link--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-jump-links__list .pf-v6-c-jump-links__list | --pf-v6-c-jump-links__link--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-jump-links__list .pf-v6-c-jump-links__list | --pf-v6-c-jump-links__link--PaddingInlineStart | 1.5rem | ||
| ||||
| .pf-v6-c-jump-links__link:is(:hover, :focus) | --pf-v6-c-jump-links__link-text--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-jump-links__item | --pf-v6-c-jump-links__list--before--BorderColor | transparent | ||
| .pf-v6-c-jump-links__item.pf-m-current > .pf-v6-c-jump-links__link | --pf-v6-c-jump-links__link--before--BorderBlockStartWidth | 3px | ||
| ||||
| .pf-v6-c-jump-links__item.pf-m-current > .pf-v6-c-jump-links__link | --pf-v6-c-jump-links__link--before--BorderInlineStartWidth | 0 | ||
| ||||
| .pf-v6-c-jump-links__item.pf-m-current > .pf-v6-c-jump-links__link | --pf-v6-c-jump-links__link--before--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-jump-links__item.pf-m-current > .pf-v6-c-jump-links__link | --pf-v6-c-jump-links__link-text--Color | (In light theme) #151515 | ||
| ||||