Skip to content
Patternfly Logo

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__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-current
.pf-c-jump-links__item
Modifies the jump links item to be current.
.pf-m-center
.pf-c-jump-links
Modifies the jump links component to center its list and label.

CSS variables

.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__link--focus--before--BorderTopWidth
3px
.pf-c-jump-links--pf-c-jump-links__link--focus--before--BorderLeftWidth
0
.pf-c-jump-links--pf-c-jump-links__link--focus--before--BorderColor
#06c
.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__link--focus--before--BorderTopWidth
0
.pf-c-jump-links--pf-c-jump-links--m-vertical__link--focus--before--BorderLeftWidth
3px
.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-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__link--focus--before--BorderTopWidth
0
.pf-c-jump-links.pf-m-vertical--pf-c-jump-links__link--focus--before--BorderLeftWidth
3px
.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__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__link:focus--pf-c-jump-links__link--before--BorderTopWidth
3px
.pf-c-jump-links__link:focus--pf-c-jump-links__link--before--BorderLeftWidth
0
.pf-c-jump-links__link:focus--pf-c-jump-links__link--before--BorderColor
#06c
.pf-c-jump-links__item.pf-m-current--pf-c-jump-links__link--before--BorderTopWidth
3px
.pf-c-jump-links__item.pf-m-current--pf-c-jump-links__link--before--BorderLeftWidth
0
.pf-c-jump-links__item.pf-m-current--pf-c-jump-links__link--before--BorderColor
#06c
.pf-c-jump-links__item.pf-m-current--pf-c-jump-links__link-text--Color
#151515

View source on GitHub