Components
SkipLink
SkipLink helps people using keyboard navigation to navigate, so they can easily go to the main content on a page.
React
Press Enter to start editing
const PreviewEn = () => { return ( <> <Paragraph> To reveal the SkipLink, tab into this example, or click inside the example and press <kbd>Tab</kbd>. <SkipLink href='#main-content'>Skip to main content</SkipLink> </Paragraph> <main id='main-content' tabIndex={-1}> Region that can receive focus from the skip link. </main> </> ); }; render(<PreviewEn />)
- children
- Description
The content to display inside the skiplink.
- Type
any
- href
- Description
Href of an element in the DOM the skiplink should skip to. E.g #main-content
- Type
string
| Name | Type | Default | Description |
|---|---|---|---|
| children | any | - | The content to display inside the skiplink. |
| href | string | - | Href of an element in the DOM the skiplink should skip to. E.g #main-content |
Use
HTML
Add the class name ds-skip-link to an <a> tag that points to the main content of the page.
CSS variables and data attributes
| Name | Value |
|---|---|
| --dsc-skiplink-padding | var(--ds-size-4) var(--ds-size-4) var(--ds-size-5) var(--ds-size-4) |
| --dsc-skiplink-background | var(--ds-color-surface-hover) |
| --dsc-skiplink-color | var(--ds-color-text-default) |
No relevant data attributes found.
Edit this page on github.com (opens in a new tab)