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.

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