Skip to content
Patternfly Logo

Jump links

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. Learn more about Beta components here.

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. 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.

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