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-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 |
Controls the display type of the list container |
flex
|
--pf-c-jump-links__list--FlexDirection |
Controls the direction of items in the list |
row
|
--pf-c-jump-links__list--PaddingTop |
Padding around the list of links |
0
|
--pf-c-jump-links__list--PaddingRight |
Right padding for the list |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-jump-links__list--PaddingBottom |
Bottom padding for the list |
0
|
--pf-c-jump-links__list--PaddingLeft |
Left padding for the list |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-jump-links__list--Visibility |
Controls visibility of the list |
visible
|
--pf-c-jump-links__list--before--BorderColor |
Border color for the list pseudo-element |
var(--pf-global--BorderColor--100, #d2d2d2)
|
--pf-global--BorderColor--100 |
#d2d2d2
|
|
--pf-c-jump-links__list--before--BorderTopWidth |
Top border width for the list pseudo-element |
var(--pf-global--BorderWidth--sm, 1px)
|
--pf-c-jump-links__list--before--BorderRightWidth |
Right border width for the list pseudo-element |
0
|
--pf-c-jump-links__list--before--BorderBottomWidth |
Bottom border width for the list pseudo-element |
0
|
--pf-c-jump-links__list--before--BorderLeftWidth |
Left border width for the list pseudo-element |
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 |
Padding around the expandable jump links disclosure widget. |
calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))
|
--pf-c-jump-links__toggle--MarginBottom |
Bottom margin for the toggle |
var(--pf-c-jump-links__toggle--MarginBottom--base,
calc(-1 * var(--pf-global--spacer--form-element, 0.375rem)))
|
--pf-c-jump-links__toggle--MarginLeft |
Left margin for the toggle |
—
|
--pf-c-jump-links__toggle-text--Color |
Color of the toggle text |
var(--pf-global--Color--100, #151515)
|
--pf-c-button--PaddingTop |
var(--pf-global--spacer--form-element, 0.375rem)
|
|
--pf-c-button--PaddingRight |
Right padding for the button |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-button--PaddingBottom |
Bottom padding for the button |
var(--pf-global--spacer--form-element, 0.375rem)
|
--pf-c-button--PaddingLeft |
Left padding for the button |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-jump-links__toggle-icon--Rotate |
Rotation angle for the toggle icon |
0
|
--pf-c-jump-links__toggle-icon--Transition |
Transition for the toggle icon |
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 |
Left margin for the toggle text |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-jump-links--m-expanded__toggle--MarginBottom |
Base margin for the toggle button |
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
