Skip to content
PatternFly logo

Jump links

Jump links allow users to navigate to sections within a page.

Examples

Documentation

Overview

Accessibility

Attribute
Applied to
Outcome
aria-label
.pf-c-jump-links
Provides an accessible name for the jump links.

Usage

Class
Applied to
Outcome
.pf-c-jump-links
<div>
Initiates the jump links container.
.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-text
<span>
Initiates the jump links expandable toggle text.
.pf-c-jump-links__toggle-icon
<span>
Initiates the jump links expandable toggle icon.
.pf-c-jump-links__label
<div>
Initiates the jump links label.
.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__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 at optional breakpoint. 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 at optional breakpoint.
.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.

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
1rem
.pf-c-jump-links--pf-c-jump-links__label--Display
block
.pf-c-jump-links--pf-c-jump-links__label--Visibility
visible
.pf-c-jump-links--pf-c-jump-links__toggle--MarginTop
calc(-1 * 0.375rem)
.pf-c-jump-links--pf-c-jump-links__toggle--MarginBottom--base
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--m-expanded__toggle--MarginBottom
calc(calc(-1 * 0.375rem) + 1rem)
.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__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-c-jump-links__toggle-text--MarginLeft
1rem
.pf-c-jump-links--pf-c-jump-links__toggle-text--Color
#151515
.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--Display
none
.pf-c-jump-links.pf-m-expandable--pf-c-jump-links__label--Visibility
hidden
.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--Display
block
.pf-c-jump-links.pf-m-non-expandable--pf-c-jump-links__label--Visibility
visible
.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--MarginBottom
calc(calc(-1 * 0.375rem) + 1rem)
.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__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