Skip to content

Jump links

When clicked, jump links allow users to navigate to sections within a page without scrolling.

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-v6-c-jump-links
Provides an accessible name for the jump links.

Usage

Class
Applied to
Outcome
.pf-v6-c-jump-links
<div>
Initiates the jump links container.
.pf-v6-c-jump-links__header
<div>
Initiates the jump links header.
.pf-v6-c-jump-links__toggle
<div>
Initiates the jump links expandable toggle.
.pf-v6-c-jump-links__toggle-text
<span>
Initiates the jump links expandable toggle text.
.pf-v6-c-jump-links__toggle-icon
<span>
Initiates the jump links expandable toggle icon.
.pf-v6-c-jump-links__label
<div>
Initiates the jump links label.
.pf-v6-c-jump-links__main
<div>
Initiates the jump links main container for when a label and list is used in the horizontal variation.
.pf-v6-c-jump-links__list
<ul>
Initiates the jump links list.
.pf-v6-c-jump-links__item
<li>
Initiates the jump links list item.
.pf-v6-c-jump-links__link
<button>
Initiates the jump links link.
.pf-v6-c-jump-links__link-text
<div>
Initiates the jump links link text.
.pf-m-vertical
.pf-v6-c-jump-links
Modifies the jump links component to be vertical.
.pf-m-center
.pf-v6-c-jump-links
Modifies the jump links component to center its list and label.
.pf-m-expandable{-on-[breakpoint]}
.pf-v6-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-v6-c-jump-links
Modifies the jump links component to be non-expandable at optional breakpoint.
.pf-m-expanded
.pf-v6-c-jump-links
Modifies the expandable jump links component for the expanded state.
.pf-m-current
.pf-v6-c-jump-links__item
Modifies the jump links item to be current.

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list--Display
flex
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list--PaddingBlockStart
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list--PaddingBlockEnd
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links--m-vertical__list--PaddingBlockStart
1rem
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links--m-vertical__list--PaddingInlineEnd
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd
1rem
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links--m-vertical__list--PaddingInlineStart
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list--FlexDirection
row
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links--m-vertical__list--FlexDirection
column
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list--before--BorderColor
(In light theme) #c7c7c7
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list--before--BorderBlockStartWidth
1px
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list--before--BorderInlineEndWidth
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list--before--BorderBlockEndWidth
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list--before--BorderInlineStartWidth
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth
1px
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links--m-vertical__list--before--BorderBlockStartWidth
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list__list--MarginBlockStart
calc(0.5rem * -1)
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__link--PaddingBlockStart
0.5rem
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__link--PaddingInlineEnd
0.5rem
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__link--PaddingBlockEnd
0.5rem
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__link--PaddingInlineStart
0.5rem
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list__list__link--PaddingBlockStart
0.5rem
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list__list__link--PaddingInlineStart
1.5rem
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__list__list__link--PaddingBlockEnd
0.5rem
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__link--OutlineOffset
calc(-1 * 0.5rem)
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__link--before--BorderBlockStartWidth
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__link--before--BorderInlineEndWidth
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__link--before--BorderBlockEndWidth
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__link--before--BorderInlineStartWidth
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__link--before--BorderColor
transparent
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth
3px
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__item--m-current__link--before--BorderColor
(In light theme) #0066cc
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth
3px
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__link-text--Color
(In light theme) #4d4d4d
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__link--hover__link-text--Color
(In light theme) #4d4d4d
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__item--m-current__link-text--Color
(In light theme) #151515
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__label--MarginBlockEnd
1rem
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__label--Display
block
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__toggle--MarginBlockEnd
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd
0.5rem
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__toggle--Display
none
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__toggle-icon--Color
(In light theme) #1f1f1f
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__toggle-icon--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links__toggle-icon--Rotate
0
:where(:root, .pf-v6-c-jump-links)--pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate
90deg
.pf-v6-c-jump-links.pf-m-vertical--pf-v6-c-jump-links__list--PaddingBlockStart
1rem
.pf-v6-c-jump-links.pf-m-vertical--pf-v6-c-jump-links__list--PaddingInlineEnd
0
.pf-v6-c-jump-links.pf-m-vertical--pf-v6-c-jump-links__list--PaddingBlockEnd
1rem
.pf-v6-c-jump-links.pf-m-vertical--pf-v6-c-jump-links__list--PaddingInlineStart
0
.pf-v6-c-jump-links.pf-m-vertical--pf-v6-c-jump-links__list--before--BorderBlockStartWidth
0
.pf-v6-c-jump-links.pf-m-vertical--pf-v6-c-jump-links__list--before--BorderInlineStartWidth
1px
.pf-v6-c-jump-links.pf-m-vertical--pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth
0
.pf-v6-c-jump-links.pf-m-vertical--pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth
3px
.pf-v6-c-jump-links.pf-m-vertical--pf-v6-c-jump-links__list--FlexDirection
column
.pf-v6-c-jump-links.pf-m-expandable--pf-v6-c-jump-links__list--Display
none
.pf-v6-c-jump-links.pf-m-expandable--pf-v6-c-jump-links__toggle--Display
block
.pf-v6-c-jump-links.pf-m-expandable--pf-v6-c-jump-links__label--Display
none
.pf-v6-c-jump-links.pf-m-non-expandable--pf-v6-c-jump-links__list--Display
flex
.pf-v6-c-jump-links.pf-m-non-expandable--pf-v6-c-jump-links__toggle--Display
none
.pf-v6-c-jump-links.pf-m-non-expandable--pf-v6-c-jump-links__label--Display
block
.pf-v6-c-jump-links.pf-m-expanded--pf-v6-c-jump-links__list--Display
flex
.pf-v6-c-jump-links.pf-m-expanded--pf-v6-c-jump-links__toggle--MarginBlockEnd
0.5rem
.pf-v6-c-jump-links.pf-m-expanded--pf-v6-c-jump-links__toggle-icon--Rotate
90deg
.pf-v6-c-jump-links.pf-m-expanded--pf-v6-c-jump-links__toggle-icon--Color
undefined
.pf-v6-c-jump-links__list .pf-v6-c-jump-links__list--pf-v6-c-jump-links__list--PaddingBlockStart
0
.pf-v6-c-jump-links__list .pf-v6-c-jump-links__list--pf-v6-c-jump-links__list--PaddingBlockEnd
0
.pf-v6-c-jump-links__list .pf-v6-c-jump-links__list--pf-v6-c-jump-links__link--PaddingBlockStart
0.5rem
.pf-v6-c-jump-links__list .pf-v6-c-jump-links__list--pf-v6-c-jump-links__link--PaddingBlockEnd
0.5rem
.pf-v6-c-jump-links__list .pf-v6-c-jump-links__list--pf-v6-c-jump-links__link--PaddingInlineStart
1.5rem
.pf-v6-c-jump-links__link:is(:hover, :focus)--pf-v6-c-jump-links__link-text--Color
(In light theme) #4d4d4d
.pf-v6-c-jump-links__item--pf-v6-c-jump-links__list--before--BorderColor
transparent
.pf-v6-c-jump-links__item.pf-m-current > .pf-v6-c-jump-links__link--pf-v6-c-jump-links__link--before--BorderBlockStartWidth
3px
.pf-v6-c-jump-links__item.pf-m-current > .pf-v6-c-jump-links__link--pf-v6-c-jump-links__link--before--BorderInlineStartWidth
0
.pf-v6-c-jump-links__item.pf-m-current > .pf-v6-c-jump-links__link--pf-v6-c-jump-links__link--before--BorderColor
(In light theme) #0066cc
.pf-v6-c-jump-links__item.pf-m-current > .pf-v6-c-jump-links__link--pf-v6-c-jump-links__link-text--Color
(In light theme) #151515

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines