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/elementsThen 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
Installation
npm install @patternfly/elementsUsage
With centered list
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
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
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
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
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
Slots on pf-jump-links-list
- Default Slot
Slots on pf-jump-links-item
- Default Slot
-
subsection
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
label-
Label to add to nav element.
- DOM Property
label- Type
-
string - Default
-
unknown
DOM Properties
None
Methods
firstUpdated()
Events
toggle-
when the
Event Type:expandeddisclosure widget is toggledunknown
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 |
—
|
|
--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 |
—
|
|
--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 |
—
|
|
--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 |
—
|
|
--pf-global--FontFamily--sans-serif |
"RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif
|
|
--pf-global--FontSize--md |
16px
|
|
--pf-global--FontWeight--normal |
400
|
|
--pf-c-jump-links__list--Display |
flex
|
|
--pf-c-jump-links__list--FlexDirection |
row
|
|
--pf-c-jump-links__list--PaddingTop |
0
|
|
--pf-c-jump-links__list--PaddingRight |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-jump-links__list--PaddingBottom |
0
|
|
--pf-c-jump-links__list--PaddingLeft |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-jump-links__list--Visibility |
visible
|
|
--pf-c-jump-links__list--before--BorderColor |
var(--pf-global--BorderColor--100, #d2d2d2)
|
|
--pf-global--BorderColor--100 |
#d2d2d2
|
|
--pf-c-jump-links__list--before--BorderTopWidth |
var(--pf-global--BorderWidth--sm, 1px)
|
|
--pf-c-jump-links__list--before--BorderRightWidth |
0
|
|
--pf-c-jump-links__list--before--BorderBottomWidth |
0
|
|
--pf-c-jump-links__list--before--BorderLeftWidth |
0
|
|
--pf-c-jump-links--m-vertical__list--PaddingTop |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-jump-links--m-vertical__list--PaddingRight |
0
|
|
--pf-c-jump-links--m-vertical__list--PaddingBottom |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-jump-links--m-vertical__list--PaddingLeft |
0
|
|
--pf-c-jump-links--m-vertical__list--before--BorderTopWidth |
0
|
|
--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth |
var(--pf-global--BorderWidth--sm, 1px)
|
|
--pf-global--BorderWidth--sm |
1px
|
|
--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth |
0
|
|
--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth |
var(--pf-global--BorderWidth--lg, 3px)
|
|
--pf-global--BorderWidth--lg |
3px
|
|
--pf-c-jump-links--m-vertical__list--FlexDirection |
column
|
|
--pf-c-jump-links__label--MarginBottom |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-jump-links__toggle--MarginTop |
calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))
|
|
--pf-c-jump-links__toggle--MarginBottom |
var(--pf-c-jump-links__toggle--MarginBottom--base,
calc(-1 * var(--pf-global--spacer--form-element, 0.375rem)))
|
|
--pf-c-jump-links__toggle--MarginLeft |
—
|
|
--pf-c-jump-links__toggle-text--Color |
var(--pf-global--Color--100, #151515)
|
|
--pf-c-button--PaddingTop |
var(--pf-global--spacer--form-element, 0.375rem)
|
|
--pf-c-button--PaddingRight |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-button--PaddingBottom |
var(--pf-global--spacer--form-element, 0.375rem)
|
|
--pf-c-button--PaddingLeft |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-jump-links__toggle-icon--Rotate |
0
|
|
--pf-c-jump-links__toggle-icon--Transition |
var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1))
|
|
--pf-global--Transition |
all 250ms cubic-bezier(0.42, 0, 0.58, 1)
|
|
--pf-c-jump-links__toggle-text--MarginLeft |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-jump-links--m-expanded__toggle--MarginBottom |
calc(var(--pf-c-jump-links__toggle--MarginBottom--base,
calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))) +
var(--pf-global--spacer--md, 1rem))
|
|
--pf-c-jump-links__toggle--MarginBottom--base |
calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))
|
|
--pf-global--spacer--form-element |
0.375rem
|
|
--pf-global--spacer--md |
1rem
|
|
--pf-c-jump-links--m-expanded__toggle-icon--Rotate |
90deg
|
|
--pf-c-jump-links--m-expanded__toggle-icon--Color |
var(--pf-global--Color--100, #151515)
|
|
--pf-global--Color--100 |
#151515
|
CSS Shadow Parts
None
