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