Jump Links
Jump links allow users to navigate to sections within a page.
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
None
Slots on pf-jump-links-item
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.
- DOM Property
label- Type
-
string | undefined - Default
-
unknown
DOM Properties
None
Methods
None
Events
toggle-
when the
Event Type:expandeddisclosure widget is toggledEvent
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
