Package org.patternfly.component.jumplinks

package org.patternfly.component.jumplinks
Provides jump links components for navigating within a page using anchor-based scroll navigation.

This package contains the JumpLinks component and its sub-components for creating a table-of-contents style navigation that links to sections on the same page. Jump links can be displayed horizontally or vertically, with optional labels, centered alignment, and expandable subsections. They support scroll spying to automatically highlight the active section.

Components

Usage

Vertical jump links with a label and nested subsections: 

import static org.patternfly.component.jumplinks.JumpLinks.jumpLinks;
import static org.patternfly.component.jumplinks.JumpLinksItem.jumpLinksItem;
import static org.patternfly.component.jumplinks.JumpLinksList.jumpLinksList;
import static org.patternfly.style.Breakpoint.default_;
import static org.patternfly.style.Breakpoints.breakpoints;
import static org.patternfly.style.ExpandableModifier.expandable;

// Simple vertical jump links
JumpLinks simpleLinks = jumpLinks("Jump to section").vertical()
        .addItem(jumpLinksItem("section-1", "Introduction"))
        .addItem(jumpLinksItem("section-2", "Getting Started"))
        .addItem(jumpLinksItem("section-3", "Advanced Topics"));

// Expandable vertical jump links with subsections
JumpLinks expandableLinks = jumpLinks("Jump to section").vertical()
        .expandable(breakpoints(default_, expandable))
        .addItem(jumpLinksItem("section-1", "Overview"))
        .addItem(jumpLinksItem("section-2", "Configuration")
                .addList(jumpLinksList()
                        .addItem(jumpLinksItem("section-2a", "Basic Setup"))
                        .addItem(jumpLinksItem("section-2b", "Advanced Options"))))
        .addItem(jumpLinksItem("section-3", "API Reference"));
See Also: