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 |
|---|---|---|---|
| children | React.ReactNode | Text to be rendered inside span | |
| className | string | Class to add to li | |
| href | string | Href for this link | |
| 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<HTMLAnchorElement>) => void | Click handler for anchor tag. Parent JumpLinks components tap into this. |
View source on GitHub
