React

Skip to content

Skip to content allows screen reader and keyboard users to bypass navigation rather than tabbing through it.

ExamplesPropsCSS variables

Examples

Simple skip to content

Popout Example
Copied to clipboard

Props

SkipToContent props

The SkipToContent component accepts the following props.

NameTypeRequiredDefaultDescription
componentany'a'Sets the base component to render. Defaults to an anchor
hrefstringThe skip to content link.
childrenReact.ReactNodeContent to display within the skip to content component, typically a string.
classNamestring''Additional styles to apply to the skip to content component.
showbooleanfalseForces the skip to component to display. This is primarily for demonstration purposes and would not normally be used.

CSS variables

--pf-c-skip-to-content--Topc_skip_to_content_Top1rem
--pf-c-skip-to-content--ZIndexc_skip_to_content_ZIndex600
--pf-c-skip-to-content--focus--Leftc_skip_to_content_focus_Left1rem