Skip link

Show navigation section

Component demo

Interactive example

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

Web component

React

Show full code

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

<IcSkipLinktarget="main"inline/>

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	If`true` , the skip link will fill the width of the page. type: boolean	false
Property inline Attribute inline	If`true` , 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	If`true` , 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	If`true` , 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.

Methods

Name	Description	Signature
Method setFocus	Sets focus on the element.	setFocus() => Promise<void>

Method

setFocus

Sets focus on the element.

setFocus() => Promise<void>

Full width

Interactive example

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

Web component

React

Show full code

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

<IcSkipLinktarget="main"inlinefullWidth/>

Monochrome

Interactive example

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

Web component

React

Show full code

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

<IcSkipLinktarget="main"inlinetheme="light"monochrome/>
<IcSkipLinktarget="main"inlinetheme="dark"monochrome/>

Last reviewed 29 April 2024 .

Component demo

Interactive example

Skip link details

Props

CSS Custom Properties

Methods

Full width

Interactive example

Monochrome

Interactive example