We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.

Skip to content
PatternFly logo

Jump links

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

Examples

Horizontal default

Horizontal with centered list

Horizontal with label

Vertical default

Vertical with label

Vertical with inactive subsections

Vertical with active subsections

Expandable

Expanded

Expandable (responsive)

Expandable (responsive) with no label

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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines