PatternFly · @patternfly/react-core

JumpLinks

In-page contents list. Reports use it for the sticky table of contents; scroll-spy is off (no client JS).

Import: import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core'
Use on: reports · docs
Upstream docs: www.patternfly.org/components/jump-links

The report table of contents. Rendered server-side without scrollableSelector, so there is no scroll-spy and no client JS — the links simply jump. Nested h3 entries go in a JumpLinksList. Because JumpLinksItem detects a nested list by React element type, compose it in a .tsx component (Astro passes .astro children to React as static HTML) — src/components/report/ReportToc.tsx is the reference.

Vertical with a nested list (ReportToc)

Code

// src/components/report/ReportToc.tsx
import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core/dist/esm/components/JumpLinks/index.js';
<JumpLinks isVertical label="Contents">
  <JumpLinksItem href="#why">Why this record</JumpLinksItem>
  <JumpLinksItem href="#trend">The long-term trend
    <JumpLinksList aria-label="The long-term trend subsections"><JumpLinksItem href="#decades">By decade</JumpLinksItem></JumpLinksList>
  </JumpLinksItem>
  <JumpLinksItem href="#cite">Cite this report</JumpLinksItem>
</JumpLinks>
// in a layout: <ReportToc toc={[{ slug: 'why', text: 'Why this record', children: [] }, …]} />