Design System React

AlphaThis a work in progress. Your input will help us to improve it. Report issues or raise questions on GitHub.

Skip links

Last updated
19/12/2025
Package version
0.13.0

This component uses absolute or sticky positioning and is not displayed in this box.

JSX for this example
<React.Fragment />

Skip links configuration

If a SkipLinks has no children, it will insert a default SkipLinks.Link component, whose text and target element can be customised through the mainContentId and mainLinkText props.

SkipLinks components can use the following props:

isStatic (optional)
Use the ‘static’ display variant, which makes the skip links use screen real estate when focused instead of being absolutely positioned.
mainContentId (optional)
The id attribute of the ‘main content’ element to link to. Default is main-content.
mainLinkText (optional)
The text to use for the ‘main content’ link. Default is ‘Skip to main content’.

Skip link items configuration

SkipLinks.Link components use the following prop:

fragmentId
ID of the destination element.
Back to top