Skip link component is a web component that displays a link to the main content of the page. It is used to skip the navigation and go directly to the main content.
Click on the live code block and hit tab to see the skip link in action.
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'
| Property | Type | Default | Description |
|---|---|---|---|
placement | 'left', 'center' | The placement of the skip link. | |
href | string | '#' | The href of the skip link |
size | 'sm', 'lg' | 'sm' | The size of the skip link |
noUnderline | boolean | false | Whether the skip link should have an underline |
| Name | Description |
|---|---|
(default) | The content of the skip link. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main skip link container. |
text | The text container of the skip link. |
high-contrast | The high contrast outline container. |
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 parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| Property Name | Description |
|---|---|
--dds-skip-link-border-color | Border color for the high contrast outline (default: var(--dds-border-neutral-transparent-interactive, #fff500)) |
--dds-skip-link-border-width | Border width for the high contrast outline (default: var(--dds-border-width-large)) |
--dds-skip-link-border-width-active | Border width for the active state (default: var(--dds-border-width-xlarge)) |
--dds-skip-link-border-radius | Border radius of the skip link (default: var(--dds-radius-small)) |
--dds-skip-link-padding-sm | Padding for small size variant (default: var(--dds-spacing-200)) |
--dds-skip-link-padding-lg | Padding for large size variant (default: var(--dds-spacing-400)) |
--dds-skip-link-text-underline-offset | Underline offset for the text (default: 3px) |
--dds-skip-link-z-index | Z-index of the skip link (default: var(--dds-z-index-100)) |
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;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
