The skip link component provides a keyboard-accessible link that lets users jump directly to the main content of the page, bypassing repeated navigation such as headers, menus or utility links.

It should usually be the first focusable element on the page and point to an element that has a matching id (typically the <main> region).

✅ Use skip links when:

• There is persistent navigation, header, or other repeated content before the main content.
• Users may need to navigate the same structure repeatedly (multi-step flows, dashboards, applications).
• You want to meet WCAG requirements for "Bypass Blocks".

❌ You usually don't need skip links when:

• The page has almost no repeated content before the main content.
• The only focusable element on the page is already the main content.

The most common pattern is to point the skip link to the main content container:

<>
<dap-ds-skip-link href="#attributes">
  Skip to attributes
</dap-ds-skip-link>
</>

• href="#main-content" must match the id on the target element.
• Place <dap-ds-skip-link> before the header/navigation in the DOM so keyboard users encounter it first.
• The component is visually hidden until it receives focus, then becomes visible.

Use the component properties to adapt it to your layout:

<>
<dap-ds-stack direction="column">
<dap-ds-skip-link href="#attributes">
  Skip to attributes
</dap-ds-skip-link>

<dap-ds-skip-link href="#attributes" placement="center" size="lg">
  Skip to attributes
</dap-ds-skip-link>

<dap-ds-skip-link href="#attributes" noUnderline>
  Skip to attributes
</dap-ds-skip-link>
</dap-ds-stack>
</>

• placement: 'left' or 'center' – controls horizontal alignment.
• size: 'sm' (default) or 'lg' – controls padding and visual emphasis.
• noUnderline: removes the underline if your layout already makes it obvious that the text is a link.

• The component is built on top of dap-ds-link, so it behaves like a standard accessible link element.
• It appears when focused (for example, by pressing Tab from the browser's address bar).
• The target element (e.g. <main id="main-content">) should be focusable or contain focusable content so that moving focus there is meaningful.
• You can have multiple skip links (for example, "Skip to main content" and "Skip to search"), each pointing to a different id.

import { DapDSSkipLink } from 'dap-design-system'

import { DapDSSkipLinkReact } from 'dap-design-system/react'

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSSkipLink } from 'dap-design-system/components'

No custom events available.

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-skip-link::part(base) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-skip-link::part(base),
.my-custom-dap-ds-skip-link::part(text) {
  /* Shared styles */
}

Example usage:

<dap-ds-skip-link class="my-custom-dap-ds-skip-link">
  Skip link
</dap-ds-skip-link>

.my-custom-dap-ds-skip-link::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-skip-link
  style="--dds-skip-link-border-color: value; --dds-skip-link-border-width: value;">
  Skip link
</dap-ds-skip-link>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-skip-link {
  --dds-skip-link-border-color: value;
  --dds-skip-link-border-width: value;
  --dds-skip-link-border-width-active: value;
}

<dap-ds-skip-link class="my-custom-dap-ds-skip-link">
  Skip link
</dap-ds-skip-link>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-skip-link {
  --dds-skip-link-border-color: value;
  --dds-skip-link-border-width: value;
}