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

Jump links

In-page anchor navigation — a list of links to section headings on the same page. Horizontal, vertical, or centered. This page (and every demo in the showcase) uses the vertical variant in the left sidebar.

Examples

Basic

Horizontal list of in-page links.

With centered list

pf-m-center.

With label

A label leads the list.

Vertical

pf-m-vertical.

Vertical with label

Vertical plus the leading label.

Vertical with inactive subsections

A nested subsection list whose items carry no current state.

Vertical with active subsections

A nested subsection list with a pf-m-current subsection item.

Expandable vertical with subsection

Collapsible rail with a nested subsection list.

Expandable (responsive)

Expandable only where the breakpoints allow it — pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl.

Expandable (responsive) with no label

The responsive expandable rail without the header label.

Documentation

Jump links props

Parameters accepted by {#include components/navigation/jump-links ... /}. Model mode: pass jumpLinks=<JumpLinks> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `id`	String	DOM id.
`vertical`	boolean	Adds `pf-m-vertical` — stacks items vertically.
`center`	boolean	Adds `pf-m-center` — center-aligns horizontal items.
`ariaLabel`	String	aria-label on the <nav>. Default `"Jump to section"`.
slot `content`	Qute block	<li class="pf-v6-c-jump-links__item"> items containing the anchor links.

Usage

Match anchors to section ids. Each href="#xxx" needs a matching id="xxx" on a heading or scrollable target.

Current section. Set pf-m-current on the active item and aria-current="page" on the link. Updating that on scroll is consumer concern — wire an IntersectionObserver in JS.

Edit jump-links.html on GitHub