Skip link

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.

Design system docs Examples Default skip link

Click on the live code block and hit tab to see the skip link in action.

<dap-ds-skip-link>
Skip to main content
</dap-ds-skip-link>
Importing 
import { DapDSSkipLink } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSSkipLinkReact } from 'dap-design-system/dist/react'
Attributes
PropertyTypeDefaultDescription
placement'left', 'center'The placement of the skip link.
hrefstring'#'The href of the skip link
size'sm', 'lg''sm'The size of the skip link
noUnderlinebooleanfalseWhether the skip link should have an underline
Slots
NameDescription
(default)The content of the skip link.
Events

No custom events available.

CSS Parts
Part NameDescription
baseThe main skip link container.
textThe text container of the skip link.
high-contrastThe high contrast outline container.
CSS Custom Properties
Property NameDescription
--dds-skip-link-border-colorBorder color for the high contrast outline (default: var(--dds-border-neutral-transparent-interactive, #fff500))
--dds-skip-link-border-widthBorder width for the high contrast outline (default: var(--dds-border-width-large))
--dds-skip-link-border-width-activeBorder width for the active state (default: var(--dds-border-width-xlarge))
--dds-skip-link-border-radiusBorder radius of the skip link (default: var(--dds-radius-small))
--dds-skip-link-padding-smPadding for small size variant (default: var(--dds-spacing-200))
--dds-skip-link-padding-lgPadding for large size variant (default: var(--dds-spacing-400))
--dds-skip-link-text-underline-offsetUnderline offset for the text (default: 3px)
--dds-skip-link-z-indexZ-index of the skip link (default: var(--dds-z-index-100))