Components

Skip link

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

HTML

HTMLReact

Press Enter to start editing

Unable to parse html

const PreviewEn = () => {
  return (
    <>
      <Paragraph>
        To reveal the skip link, 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 />)

Usage

Add the class name ds-skip-link to an <a> tag that points to the main content of the page. The target should be able to receive focus with tabindex="-1".

CSS variables and data attributes

Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent where these are set.

CSS Variables
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.

React

import { SkipLink } from "@digdir/designsystemet-react";
<SkipLink href="#main-content">Skip to main content</SkipLink>;

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

Name	Type	Default	Description
children	`ReactNode`	-	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

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