Patternfly Logo

Skip to content

Examples

Basic

Documentation

Overview

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

When using .pf-c-skip-to-content you must provide an href attribute whose value corresponds to the id attribute of the primary content container for your application. In most cases this is the <main> element. For a demo of this see the page demo, and note the use of tabindex="-1" which allows the element to receive focus programmatically.

Accessibility

AttributeApplied toOutcome
href="[id of main container]".pf-c-skip-to-contentSends focus to the primary content container. Required

Usage

ClassApplied toOutcome
.pf-c-skip-to-content<a>initiates the skip to content link.

CSS variables

.pf-c-skip-to-content--pf-c-skip-to-content--Top
1rem
.pf-c-skip-to-content--pf-c-skip-to-content--ZIndex
600
.pf-c-skip-to-content--pf-c-skip-to-content--focus--Left
1rem

View source on Github