Skip to main content

What are you looking for?

Try searching for…

Components

SkipLink

SkipLink helps people using keyboard navigation to navigate, so they can easily go to the main content on a page.

children
Description

The content to display inside the skiplink.

Type
ReactNode
href
Description

Href of an element in the DOM the skiplink should skip to. E.g #main-content

Type
string
NameTypeDefaultDescription
childrenReactNode-

The content to display inside the skiplink.

hrefstring-

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

CSS Variables
NameValue
--dsc-skiplink-paddingvar(--ds-size-4) var(--ds-size-4) var(--ds-size-5) var(--ds-size-4)
--dsc-skiplink-backgroundvar(--ds-color-surface-hover)
--dsc-skiplink-colorvar(--ds-color-text-default)

No relevant data attributes found.

Edit this page on github.com (opens in a new tab)