Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

Skip link

Guidance Code Accessibility

Component demo

Interactive example

Tab to this component preview to view the skip link component.

<ic-skip-linktarget="main"inline></ic-skip-link>

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property target
Attribute target

The target ID for the element which should receive focus when triggering the skip link.

Required type: string
Property fullWidth
Attribute full-width

Iftrue , the skip link will fill the width of the page.

type: boolean
false
Property inline
Attribute inline

Iftrue , the skip link will appear inline with surrounding page content when focused.

type: boolean
false
Property label
Attribute label

The label displayed when the skip link is focused.

type: string
"Skip to main content"
Property monochrome
Attribute monochrome

Iftrue , the skip link will display as black in the light theme, and white in the dark theme.

type: boolean
false
Property theme
Attribute theme

Sets the theme color to the dark or light theme color.inherit will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light"
"inherit"
Property transparentBackground
Attribute transparent-background

Iftrue , the background will be hidden.

type: boolean
false
Property target
Attribute target

The target ID for the element which should receive focus when triggering the skip link.

Required type: string
Property fullWidth
Attribute full-width

Iftrue , the skip link will fill the width of the page.

type: boolean
Default: false
Property inline
Attribute inline

Iftrue , the skip link will appear inline with surrounding page content when focused.

type: boolean
Default: false
Property label
Attribute label

The label displayed when the skip link is focused.

type: string
Default: "Skip to main content"
Property monochrome
Attribute monochrome

Iftrue , the skip link will display as black in the light theme, and white in the dark theme.

type: boolean
Default: false
Property theme
Attribute theme

Sets the theme color to the dark or light theme color.inherit will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light"
Default: "inherit"
Property transparentBackground
Attribute transparent-background

Iftrue , the background will be hidden.

type: boolean
Default: false

CSS Custom Properties

Name Description
--ic-skip-link-position-top The top position of the skip link when it is not displayed inline and has an absolute position.
--ic-skip-link-position-top The top position of the skip link when it is not displayed inline and has an absolute position.

Full width

Interactive example

Tab to this component preview to view the skip link component.

<ic-skip-linktarget="main"inlinefull-width></ic-skip-link>

Monochrome

Interactive example

Tab to this component preview to view the skip link components.

<ic-skip-linktarget="main"inlinetheme="light"monochrome></ic-skip-link>
<ic-skip-linktarget="main"inlinetheme="dark"monochrome></ic-skip-link>

Last reviewed 29 April 2024 .
Navigated to Skip link - Intelligence Community Design System