Jump Links
Overview
Jump links allow users to navigate to sections within a page.
Installation
npm install @patternfly/elements
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
- 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:expanded
disclosure 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