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

Props

SkipToContent

*required
NameTypeDefaultDescription
hrefrequiredstringThe skip to content link.
childrenReact.ReactNodeContent to display within the skip to content component, typically a string.
classNamestringAdditional styles to apply to the skip to content component.
showbooleanfalseForces the skip to content to display. This is primarily for demonstration purposes and would not normally be used.

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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines