PF6.JumpLinks

PF6 JumpLinks component

Jump links allow users to navigate to sections of a page by clicking anchors in a vertical (or horizontal) list. Useful for long-form pages with multiple named sections.

See: https://www.patternfly.org/components/jump-links

Definition

type JumpLinks msg

Opaque JumpLinks type

type JumpLink msg

A single jump link item (may contain subsection links)

Constructor

jumpLinks : List (JumpLink msg) -> JumpLinks msg

Construct a JumpLinks component from a list of links

jumpLinks
    [ link "Section 1" "#section-1" |> withActive
    , link "Section 2" "#section-2"
    , link "Section 3" "#section-3"
    ]

Link constructors

link : String -> String -> JumpLink msg

Construct a jump link

link "Getting started" "#getting-started"

subsectionLink : String -> String -> List (JumpLink msg) -> JumpLink msg

Construct a jump link with subsection links

subsectionLink "Overview"
    "#overview"
    [ link "Introduction" "#intro"
    , link "Quick start" "#quick-start"
    ]

Layout modifiers

withVertical : JumpLinks msg -> JumpLinks msg

Vertical layout (default) — links stacked top to bottom

withCentered : JumpLinks msg -> JumpLinks msg

Center the links horizontally (applies mainly to horizontal layout)

withSticky : JumpLinks msg -> JumpLinks msg

Sticky positioning — the nav stays visible while the page scrolls

Label

withLabel : String -> JumpLinks msg -> JumpLinks msg

Add a heading label above the links

Rendering

toMarkup : Theme -> JumpLinks msg -> Element msg

Render the JumpLinks as an Element msg

Links use Element.link to produce <a href> anchors. For in-page navigation to work, the target sections must have matching id attributes set via Element.htmlAttribute (Html.Attributes.id "section-name").

lenards/elm-ui-patternfly/4.0.1