## Examples

### Horizontal default


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Horizontal with centered list


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Horizontal with label


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Vertical default


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Vertical with label


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Vertical with inactive subsections


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Vertical with active subsections


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### Expandable


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Expanded


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### Expandable (responsive)


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

### Expandable (responsive) with no label


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

## 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](/tokens/all-patternfly-tokens). **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](/tokens/all-patternfly-tokens). |
| `.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. |