Skip to content
PatternFly.org Contribute on Github
PatternFly Elements
Versions v3 v2 v1

Jump Links

Jump links allow users to navigate to sections within a page.

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-jump-links/pf-jump-links.js';

Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.

Overview

Basic

Inactive section Active section Inactive section

Installation

npm install @patternfly/elements

Usage

With centered list

Inactive section Active section Inactive section
View HTML Source 
<pf-jump-links centered>
  <pf-jump-links-item href="#heading-1">Inactive section</pf-jump-links-item>
  <pf-jump-links-item href="#heading-2" active>Active section</pf-jump-links-item>
  <pf-jump-links-item href="#heading-3">Inactive section</pf-jump-links-item>
</pf-jump-links>

With label

Inactive section Active section Inactive section
View HTML Source 
<pf-jump-links label="Jump to section">
  <pf-jump-links-item href="#heading-1">Inactive section</pf-jump-links-item>
  <pf-jump-links-item href="#heading-2" active>Active section</pf-jump-links-item>
  <pf-jump-links-item href="#heading-3">Inactive section</pf-jump-links-item>
</pf-jump-links>

Vertical

Inactive section Active section Inactive section
View HTML Source 
<pf-jump-links vertical>
  <pf-jump-links-item href="#heading-1">Inactive section</pf-jump-links-item>
  <pf-jump-links-item href="#heading-2" active>Active section</pf-jump-links-item>
  <pf-jump-links-item href="#heading-3">Inactive section</pf-jump-links-item>
</pf-jump-links>

Expandable vertical with subsection

Inactive section Section with active subsection Active subsection Inactive subsection Inactive subsection Inactive section Inactive section
View HTML Source 
<pf-jump-links vertical expandable label="Jump to section">
  <pf-jump-links-item href="#heading-1">Inactive section</pf-jump-links-item>
  <pf-jump-links-item href="#heading-2">
    Section with active subsection
    <pf-jump-links-list slot="subsection">
<pf-jump-links-item href="#heading-2-1" active>Active subsection</pf-jump-links-item>
<pf-jump-links-item href="#heading-2-2">Inactive subsection</pf-jump-links-item>
<pf-jump-links-item href="#heading-2-3">Inactive subsection</pf-jump-links-item>
    </pf-jump-links-list>
  </pf-jump-links-item>
  <pf-jump-links-item href="#heading-3">Inactive section</pf-jump-links-item>
  <pf-jump-links-item href="#heading-4">Inactive section</pf-jump-links-item>
</pf-jump-links>

Expandable vertical with Scrollspy

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
View HTML Source 
<pf-jump-links vertical
          expandable
          expanded
          label="Jump to section"
          scrollable-element="scrollable-element">
  <pf-jump-links-item id="1" href="#heading-1">Heading 1</pf-jump-links-item>
  <pf-jump-links-item id="2" href="#heading-2">Heading 2</pf-jump-links-item>
  <pf-jump-links-item id="3" href="#heading-3">Heading 3</pf-jump-links-item>
  <pf-jump-links-item id="4" href="#heading-4">Heading 4</pf-jump-links-item>
  <pf-jump-links-item id="5" href="#heading-5">Heading 5</pf-jump-links-item>
</pf-jump-links>

Slots

Default Slot

Place pf-jump-links-items here

None

None

Attributes

expandable

Whether the element features a disclosure widget around the nav items

DOM Property
expandable
Type
boolean
Default
false
expanded

Whether the expandable element's disclosure widget is expanded

DOM Property
expanded
Type
boolean
Default
false
vertical

Whether the layout of children is vertical or horizontal.

DOM Property
vertical
Type
boolean
Default
false
centered

Whether to center children.

DOM Property
centered
Type
boolean
Default
false
offset

Offset to add to the scroll position, potentially for a masthead which content scrolls under.

DOM Property
offset
Type
number
Default
0
label

Label to add to nav element. Required for accessibility.

DOM Property
label
Type
string
Default
'Jump to section'

DOM Properties

None

Methods

None

Events

toggle

when the expanded disclosure widget is toggled

Event Type: 
Event

CSS Custom Properties

CSS Property Description Default
--pf-c-jump-links__list--Display —
--pf-c-jump-links__list--FlexDirection —
--pf-c-jump-links__list--PaddingTop

-- padding around the list of links

 —
--pf-c-jump-links__list--PaddingRight —
--pf-c-jump-links__list--PaddingBottom —
--pf-c-jump-links__list--PaddingLeft —
--pf-c-jump-links__list--Visibility —
--pf-c-jump-links__list--before--BorderColor —
--pf-c-jump-links__list--before--BorderTopWidth —
--pf-c-jump-links__list--before--BorderRightWidth —
--pf-c-jump-links__list--before--BorderBottomWidth —
--pf-c-jump-links__list--before--BorderLeftWidth —
--pf-c-jump-links__toggle--MarginBottom--base —
--pf-c-jump-links__toggle--MarginTop

-- padding around the expandable jump links disclosure widget.

 —
--pf-c-jump-links__toggle--MarginBottom —
--pf-c-jump-links__toggle--MarginBottom--base —
--pf-c-jump-links__toggle--MarginLeft —
--pf-c-jump-links__toggle-text--Color —
--pf-c-button--PaddingTop

-- padding around the expandable jump links disclosure widget.

 —
--pf-c-button--PaddingRight —
--pf-c-button--PaddingBottom —
--pf-c-button--PaddingLeft —
--pf-c-jump-links__toggle-icon--Rotate —
--pf-c-jump-links__toggle-icon--Transition —
--pf-c-jump-links__toggle-text--MarginLeft —
--pf-c-jump-links--m-expanded__toggle--MarginBottom —
--pf-c-jump-links--m-expanded__toggle-icon--Rotate —
--pf-c-jump-links--m-expanded__toggle-icon--Color —
--pf-c-jump-links--m-vertical__list--PaddingTop —
--pf-c-jump-links--m-vertical__list--PaddingRight —
--pf-c-jump-links--m-vertical__list--PaddingBottom —
--pf-c-jump-links--m-vertical__list--PaddingLeft —
--pf-c-jump-links--m-vertical__list--before--BorderTopWidth —
--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth —
--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth —
--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth —
--pf-c-jump-links--m-vertical__list--FlexDirection —

CSS Shadow Parts

None

© 2018-2024 Red Hat, Inc. Deploys by Netlify