Skip to content
PatternFly logo

Skip to content

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

Examples

Basic

Basic screenshot

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, navigate to a page demo and note the use of tabindex="-1", which allows the element to receive focus programmatically.

Accessibility

Attribute
Applied to
Outcome
href="[id of main container]"
.pf-c-skip-to-content
Sends focus to the primary content container. Required

Usage

Class
Applied to
Outcome
.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