Live demo — this example is server-driven; run the showcase locally for the interactive version.

Skip to content

An accessibility helper — a link that's only visible when focused via the keyboard. Lets users tabbing through the page jump past repeated navigation (masthead, nav rail) directly to the main content.

Examples

Basic

The link is visually hidden until focused. Tab into the example to make it appear.

Tab into the area above. The "Skip to content" link should become visible. Pressing Enter would jump focus to #main-content in the host page.

Custom text

Pass the link label as the include body to override the default "Skip to content" text.

Documentation

Parameters accepted by {#include components/navigation/skip-to-content ... /}. Model mode: pass skipToContent=<SkipToContent> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `id`	String	DOM id.
* `href`	String	Target id to jump to (typically `#main-content`).
(content slot)	Slot	Visible link label, passed as the include body. Defaults to `"Skip to content"` when the body is empty.

Usage

Place first. The skip link must be the very first focusable element in the page — before the masthead, before any nav. PF v6's CSS keeps it visually hidden until it receives focus.

Add tabindex to the target. Set tabindex="-1" on the destination element so focus can land there programmatically.

Edit skip-to-content.html on GitHub