PatternFly Elements - Home PatternFly Elements

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

None

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 expanded disclosure widget is toggled

Event Type:
Event

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

© 2022-2023 Red Hat, Inc. Deploys by Netlify