PatternFly Elements
Jump Links
Overview
Jump links allow users to navigate to sections within a page.
Installation
npm install @patternfly/elementsSlots
- Default Slot
-
Place pf-jump-links-items here
Slots on pf-jump-links-list
None
Slots on pf-jump-links-item
None
Attributes
expandable- DOM Property
expandable- Type
-
boolean - Default
-
false
expanded- DOM Property
expanded- Type
-
boolean - Default
-
false
vertical- DOM Property
vertical- Type
-
boolean - Default
-
false
centered- DOM Property
centered- Type
-
boolean - Default
-
false
offset- DOM Property
offset- Type
-
number - Default
-
0
label- DOM Property
label- Type
-
string | undefined - Default
-
unknown
DOM Properties
_items- Type
-
PfJumpLinksItem[] - Default
-
unknown
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
