PatternFly · @patternfly/react-core

SkipToContent

The skip link every layout renders first. Layouts include it; pages never do.

Import: import { SkipToContent } from '@patternfly/react-core'
Use on: all
Upstream docs: www.patternfly.org/components/skip-to-content

Both layouts render <SkipToContent href="#main"> as the first element in <body>; it is visually hidden until focused. Press Tab once on any page to see it. Pages never render their own.

Usage

Rendered by the layout above this page — press Tab from the address bar.

Code

import { SkipToContent } from '@patternfly/react-core';
<SkipToContent href="#main">Skip to content</SkipToContent>
<main id="main">…</main>