Skip to content
Patternfly Logo

Jump links

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Documentation

Overview

Accessibility

Attribute
Applied to
Outcome

Usage

Class
Applied to
Outcome
.pf-c-jump-links
<div>
Initiates the jump links container.
.pf-c-jump-links__main
<div>
Initiates the jump links main container for when a label and list is used in the horizontal variation.
.pf-c-jump-links__list
<ul>
Initiates the jump links list.
.pf-c-jump-links__item
<li>
Initiates the jump links list item.
.pf-c-jump-links__link
<button>
Initiates the jump links link.
.pf-c-jump-links__header
<div>
Initiates the jump links header.
.pf-c-jump-links__toggle
<div>
Initiates the jump links expandable toggle.
.pf-c-jump-links__toggle-icon
<div>
Initiates the jump links expandable toggle icon.
.pf-c-jump-links__label
<div>
Initiates the jump links label.
.pf-c-jump-links__link-text
<div>
Initiates the jump links link text.
.pf-m-vertical
.pf-c-jump-links
Modifies the jump links component to be vertical.
.pf-m-center
.pf-c-jump-links
Modifies the jump links component to center its list and label.
.pf-m-expandable{-on-[breakpoint]}
.pf-c-jump-links
Modifies the jump links component to be expandable via a toggle. Note: works with vertical jump links only.
.pf-m-non-expandable{-on-[breakpoint]}
.pf-c-jump-links
Modifies the jump links component to be non-expandable.
.pf-m-expanded
.pf-c-jump-links
Modifies the expandable jump links component for the expanded state.
.pf-m-current
.pf-c-jump-links__item
Modifies the jump links item to be current.
.pf-m-toggle
.pf-c-jump-links__label
Modifies the jump links label to serve as toggle text for when the jump links are expandable.

CSS variables

.pf-c-jump-links--pf-c-jump-links__list--Display
flex
.pf-c-jump-links--pf-c-jump-links__list--Visibility
visible
.pf-c-jump-links--pf-c-jump-links__list--PaddingTop
0
.pf-c-jump-links--pf-c-jump-links__list--PaddingRight
1rem
.pf-c-jump-links--pf-c-jump-links__list--PaddingBottom
0
.pf-c-jump-links--pf-c-jump-links__list--PaddingLeft
1rem
.pf-c-jump-links--pf-c-jump-links--m-vertical__list--PaddingTop
1rem
.pf-c-jump-links--pf-c-jump-links--m-vertical__list--PaddingRight
0
.pf-c-jump-links--pf-c-jump-links--m-vertical__list--PaddingBottom
1rem
.pf-c-jump-links--pf-c-jump-links--m-vertical__list--PaddingLeft
0
.pf-c-jump-links--pf-c-jump-links__list--FlexDirection
row
.pf-c-jump-links--pf-c-jump-links--m-vertical__list--FlexDirection
column
.pf-c-jump-links--pf-c-jump-links__list--before--BorderColor
#d2d2d2
.pf-c-jump-links--pf-c-jump-links__list--before--BorderTopWidth
1px
.pf-c-jump-links--pf-c-jump-links__list--before--BorderRightWidth
0
.pf-c-jump-links--pf-c-jump-links__list--before--BorderBottomWidth
0
.pf-c-jump-links--pf-c-jump-links__list--before--BorderLeftWidth
0
.pf-c-jump-links--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth
1px
.pf-c-jump-links--pf-c-jump-links--m-vertical__list--before--BorderTopWidth
0
.pf-c-jump-links--pf-c-jump-links__list__list--MarginTop
calc(0.5rem * -1)
.pf-c-jump-links--pf-c-jump-links__link--PaddingTop
1rem
.pf-c-jump-links--pf-c-jump-links__link--PaddingRight
1rem
.pf-c-jump-links--pf-c-jump-links__link--PaddingBottom
1rem
.pf-c-jump-links--pf-c-jump-links__link--PaddingLeft
1rem
.pf-c-jump-links--pf-c-jump-links__list__list__link--PaddingTop
0.5rem
.pf-c-jump-links--pf-c-jump-links__list__list__link--PaddingLeft
1.5rem
.pf-c-jump-links--pf-c-jump-links__list__list__link--PaddingBottom
0.5rem
.pf-c-jump-links--pf-c-jump-links__link--OutlineOffset
calc(-1 * 0.5rem)
.pf-c-jump-links--pf-c-jump-links__link--before--BorderTopWidth
0
.pf-c-jump-links--pf-c-jump-links__link--before--BorderRightWidth
0
.pf-c-jump-links--pf-c-jump-links__link--before--BorderBottomWidth
0
.pf-c-jump-links--pf-c-jump-links__link--before--BorderLeftWidth
0
.pf-c-jump-links--pf-c-jump-links__link--before--BorderColor
transparent
.pf-c-jump-links--pf-c-jump-links__item--m-current__link--before--BorderTopWidth
3px
.pf-c-jump-links--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth
0
.pf-c-jump-links--pf-c-jump-links__item--m-current__link--before--BorderColor
#06c
.pf-c-jump-links--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth
0
.pf-c-jump-links--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth
3px
.pf-c-jump-links--pf-c-jump-links__link-text--Color
#6a6e73
.pf-c-jump-links--pf-c-jump-links__link--hover__link-text--Color
#151515
.pf-c-jump-links--pf-c-jump-links__link--focus__link-text--Color
#151515
.pf-c-jump-links--pf-c-jump-links__item--m-current__link-text--Color
#151515
.pf-c-jump-links--pf-c-jump-links__label--MarginBottom--base
1rem
.pf-c-jump-links--pf-c-jump-links__label--MarginBottom
1rem
.pf-c-jump-links--pf-c-jump-links--m-expanded__label--MarginBottom
1rem
.pf-c-jump-links--pf-c-jump-links--m-non-expandable__label--MarginBottom
1rem
.pf-c-jump-links--pf-c-jump-links__toggle--MarginTop
calc(-1 * 0.375rem)
.pf-c-jump-links--pf-c-jump-links__toggle--MarginBottom
calc(-1 * 0.375rem)
.pf-c-jump-links--pf-c-jump-links__toggle--MarginLeft
calc(-1 * 1rem)
.pf-c-jump-links--pf-c-jump-links__toggle--Display
none
.pf-c-jump-links--pf-c-jump-links__toggle--Visibility
hidden
.pf-c-jump-links--pf-c-jump-links__label--m-toggle--Display
none
.pf-c-jump-links--pf-c-jump-links__label--m-toggle--Visibility
hidden
.pf-c-jump-links--pf-c-jump-links__toggle-icon--Color
currentColor
.pf-c-jump-links--pf-c-jump-links__toggle-icon--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-jump-links--pf-c-jump-links__toggle-icon--Rotate
0
.pf-c-jump-links--pf-c-jump-links--m-expanded__toggle-icon--Color
#151515
.pf-c-jump-links--pf-c-jump-links--m-expanded__toggle-icon--Rotate
90deg
.pf-c-jump-links.pf-m-vertical--pf-c-jump-links__list--PaddingTop
1rem
.pf-c-jump-links.pf-m-vertical--pf-c-jump-links__list--PaddingRight
0
.pf-c-jump-links.pf-m-vertical--pf-c-jump-links__list--PaddingBottom
1rem
.pf-c-jump-links.pf-m-vertical--pf-c-jump-links__list--PaddingLeft
0
.pf-c-jump-links.pf-m-vertical--pf-c-jump-links__list--before--BorderTopWidth
0
.pf-c-jump-links.pf-m-vertical--pf-c-jump-links__list--before--BorderLeftWidth
1px
.pf-c-jump-links.pf-m-vertical--pf-c-jump-links__item--m-current__link--before--BorderTopWidth
0
.pf-c-jump-links.pf-m-vertical--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth
3px
.pf-c-jump-links.pf-m-vertical--pf-c-jump-links__list--FlexDirection
column
.pf-c-jump-links.pf-m-expandable--pf-c-jump-links__list--Display
none
.pf-c-jump-links.pf-m-expandable--pf-c-jump-links__list--Visibility
hidden
.pf-c-jump-links.pf-m-expandable--pf-c-jump-links__toggle--Display
block
.pf-c-jump-links.pf-m-expandable--pf-c-jump-links__toggle--Visibility
visible
.pf-c-jump-links.pf-m-expandable--pf-c-jump-links__label--m-toggle--Display
block
.pf-c-jump-links.pf-m-expandable--pf-c-jump-links__label--m-toggle--Visibility
visible
.pf-c-jump-links.pf-m-expandable--pf-c-jump-links__label--MarginBottom
0
.pf-c-jump-links.pf-m-non-expandable--pf-c-jump-links__list--Display
flex
.pf-c-jump-links.pf-m-non-expandable--pf-c-jump-links__list--Visibility
visible
.pf-c-jump-links.pf-m-non-expandable--pf-c-jump-links__toggle--Display
none
.pf-c-jump-links.pf-m-non-expandable--pf-c-jump-links__toggle--Visibility
hidden
.pf-c-jump-links.pf-m-non-expandable--pf-c-jump-links__label--m-toggle--Display
none
.pf-c-jump-links.pf-m-non-expandable--pf-c-jump-links__label--m-toggle--Visibility
hidden
.pf-c-jump-links.pf-m-non-expandable--pf-c-jump-links__label--MarginBottom
1rem
.pf-c-jump-links.pf-m-expanded--pf-c-jump-links__list--Display
flex
.pf-c-jump-links.pf-m-expanded--pf-c-jump-links__list--Visibility
visible
.pf-c-jump-links.pf-m-expanded--pf-c-jump-links__toggle-icon--Rotate
90deg
.pf-c-jump-links.pf-m-expanded--pf-c-jump-links__toggle-icon--Color
#151515
.pf-c-jump-links.pf-m-expanded--pf-c-jump-links__label--MarginBottom
1rem
.pf-c-jump-links__list .pf-c-jump-links__list--pf-c-jump-links__list--PaddingTop
0
.pf-c-jump-links__list .pf-c-jump-links__list--pf-c-jump-links__list--PaddingBottom
0
.pf-c-jump-links__list .pf-c-jump-links__list--pf-c-jump-links__link--PaddingTop
0.5rem
.pf-c-jump-links__list .pf-c-jump-links__list--pf-c-jump-links__link--PaddingBottom
0.5rem
.pf-c-jump-links__list .pf-c-jump-links__list--pf-c-jump-links__link--PaddingLeft
1.5rem
.pf-c-jump-links__link:hover--pf-c-jump-links__link-text--Color
#151515
.pf-c-jump-links__link:focus--pf-c-jump-links__link-text--Color
#151515
.pf-c-jump-links__item--pf-c-jump-links__list--before--BorderColor
transparent
.pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link--pf-c-jump-links__link--before--BorderTopWidth
3px
.pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link--pf-c-jump-links__link--before--BorderLeftWidth
0
.pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link--pf-c-jump-links__link--before--BorderColor
#06c
.pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link--pf-c-jump-links__link-text--Color
#151515

View source on GitHub