- React
- HTML
- HTML demos

## 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