Jump links

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 column	Selector	Variable	Value
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list--Display	flex
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list--PaddingBlockStart	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list--PaddingInlineEnd	1rem
--pf-v6-c-jump-links__list--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list--PaddingBlockEnd	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list--PaddingInlineStart	1rem
--pf-v6-c-jump-links__list--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-jump-links	--pf-v6-c-jump-links--m-vertical__list--PaddingBlockStart	1rem
--pf-v6-c-jump-links--m-vertical__list--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-jump-links	--pf-v6-c-jump-links--m-vertical__list--PaddingInlineEnd	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd	1rem
--pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-jump-links	--pf-v6-c-jump-links--m-vertical__list--PaddingInlineStart	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list--FlexDirection	row
	.pf-v6-c-jump-links	--pf-v6-c-jump-links--m-vertical__list--FlexDirection	column
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list--before--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-jump-links__list--before--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list--before--BorderBlockStartWidth	1px
--pf-v6-c-jump-links__list--before--BorderBlockStartWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list--before--BorderInlineEndWidth	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list--before--BorderBlockEndWidth	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list--before--BorderInlineStartWidth	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth	1px
--pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-jump-links	--pf-v6-c-jump-links--m-vertical__list--before--BorderBlockStartWidth	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list__list--MarginBlockStart	calc(0.5rem * -1)
--pf-v6-c-jump-links__list__list--MarginBlockStart calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__link--PaddingBlockStart	0.5rem
--pf-v6-c-jump-links__link--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__link--PaddingInlineEnd	0.5rem
--pf-v6-c-jump-links__link--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__link--PaddingBlockEnd	0.5rem
--pf-v6-c-jump-links__link--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__link--PaddingInlineStart	0.5rem
--pf-v6-c-jump-links__link--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list__list__link--PaddingBlockStart	0.5rem
--pf-v6-c-jump-links__list__list__link--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list__list__link--PaddingInlineStart	1.5rem
--pf-v6-c-jump-links__list__list__link--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__list__list__link--PaddingBlockEnd	0.5rem
--pf-v6-c-jump-links__list__list__link--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__link--OutlineOffset	calc(-1 * 0.5rem)
--pf-v6-c-jump-links__link--OutlineOffset calc(-1 * --pf-t--global--spacer--sm) calc(-1 * --pf-t--global--spacer--200) calc(-1 * 0.5rem)
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__link--before--BorderBlockStartWidth	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__link--before--BorderInlineEndWidth	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__link--before--BorderBlockEndWidth	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__link--before--BorderInlineStartWidth	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__link--before--BorderColor	transparent
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth	3px
--pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth --pf-t--global--border--width--extra-strong --pf-t--global--border--width--300 3px
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__item--m-current__link--before--BorderColor	(In light theme) #0066cc
--pf-v6-c-jump-links__item--m-current__link--before--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-jump-links	--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth	3px
--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth --pf-t--global--border--width--extra-strong --pf-t--global--border--width--300 3px
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__link-text--Color	(In light theme) #4d4d4d
--pf-v6-c-jump-links__link-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__link--hover__link-text--Color	(In light theme) #4d4d4d
--pf-v6-c-jump-links__link--hover__link-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__item--m-current__link-text--Color	(In light theme) #151515
--pf-v6-c-jump-links__item--m-current__link-text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__label--MarginBlockEnd	1rem
--pf-v6-c-jump-links__label--MarginBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__label--Display	block
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__toggle--MarginBlockEnd	0
	.pf-v6-c-jump-links	--pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd	0.5rem
--pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__toggle--Display	none
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__toggle-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-jump-links__toggle-icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__toggle-icon--TransitionDuration	200ms
--pf-v6-c-jump-links__toggle-icon--TransitionDuration --pf-t--global--motion--duration--icon--long --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-jump-links	--pf-v6-c-jump-links__toggle-icon--Rotate	0
	.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__list--PaddingBlockStart --pf-v6-c-jump-links--m-vertical__list--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-jump-links.pf-m-vertical	--pf-v6-c-jump-links__list--PaddingInlineEnd	0
--pf-v6-c-jump-links__list--PaddingInlineEnd --pf-v6-c-jump-links--m-vertical__list--PaddingInlineEnd 0
	.pf-v6-c-jump-links.pf-m-vertical	--pf-v6-c-jump-links__list--PaddingBlockEnd	1rem
--pf-v6-c-jump-links__list--PaddingBlockEnd --pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-jump-links.pf-m-vertical	--pf-v6-c-jump-links__list--PaddingInlineStart	0
--pf-v6-c-jump-links__list--PaddingInlineStart --pf-v6-c-jump-links--m-vertical__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__list--before--BorderBlockStartWidth --pf-v6-c-jump-links--m-vertical__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__list--before--BorderInlineStartWidth --pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 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__item--m-current__link--before--BorderBlockStartWidth --pf-v6-c-jump-links--m-vertical__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__item--m-current__link--before--BorderInlineStartWidth --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth --pf-t--global--border--width--extra-strong --pf-t--global--border--width--300 3px
	.pf-v6-c-jump-links.pf-m-vertical	--pf-v6-c-jump-links__list--FlexDirection	column
--pf-v6-c-jump-links__list--FlexDirection --pf-v6-c-jump-links--m-vertical__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__toggle--MarginBlockEnd --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-jump-links.pf-m-expanded	--pf-v6-c-jump-links__toggle-icon--Rotate	90deg
--pf-v6-c-jump-links__toggle-icon--Rotate --pf-v6-c-jump-links--m-expanded__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__toggle-icon--Color --pf-v6-c-jump-links--m-expanded__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__link--PaddingBlockStart --pf-v6-c-jump-links__list__list__link--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 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__link--PaddingBlockEnd --pf-v6-c-jump-links__list__list__link--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 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--PaddingInlineStart --pf-v6-c-jump-links__list__list__link--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 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__link-text--Color --pf-v6-c-jump-links__link--hover__link-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #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__link--before--BorderBlockStartWidth --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth --pf-t--global--border--width--extra-strong --pf-t--global--border--width--300 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__link--before--BorderInlineStartWidth --pf-v6-c-jump-links__item--m-current__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__link--before--BorderColor --pf-v6-c-jump-links__item--m-current__link--before--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #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
--pf-v6-c-jump-links__link-text--Color --pf-v6-c-jump-links__item--m-current__link-text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515

View source on GitHub