---
id: Jump links
section: components
cssPrefix: pf-v5-c-jump-links
---## Examples

### Horizontal default

```html
<nav class="pf-v5-c-jump-links">
  <ul class="pf-v5-c-jump-links__list" role="list">
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item pf-m-current">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Active section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
  </ul>
</nav>

```

### Horizontal with centered list

```html
<nav class="pf-v5-c-jump-links pf-m-center">
  <ul class="pf-v5-c-jump-links__list" role="list">
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item pf-m-current">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Active section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
  </ul>
</nav>

```

### Horizontal with label

```html
<nav class="pf-v5-c-jump-links" aria-label="Jump to section">
  <div class="pf-v5-c-jump-links__main">
    <div class="pf-v5-c-jump-links__header">
      <div class="pf-v5-c-jump-links__label">Jump to section</div>
    </div>
    <ul class="pf-v5-c-jump-links__list" role="list">
      <li class="pf-v5-c-jump-links__item">
        <a class="pf-v5-c-jump-links__link" href="#">
          <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
        </a>
      </li>
      <li class="pf-v5-c-jump-links__item pf-m-current">
        <a class="pf-v5-c-jump-links__link" href="#">
          <span class="pf-v5-c-jump-links__link-text">Active section</span>
        </a>
      </li>
      <li class="pf-v5-c-jump-links__item">
        <a class="pf-v5-c-jump-links__link" href="#">
          <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
        </a>
      </li>
    </ul>
  </div>
</nav>
<br />
<nav class="pf-v5-c-jump-links pf-m-center" aria-label="Jump to section">
  <div class="pf-v5-c-jump-links__main">
    <div class="pf-v5-c-jump-links__header">
      <div class="pf-v5-c-jump-links__label">Jump to section</div>
    </div>
    <ul class="pf-v5-c-jump-links__list" role="list">
      <li class="pf-v5-c-jump-links__item">
        <a class="pf-v5-c-jump-links__link" href="#">
          <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
        </a>
      </li>
      <li class="pf-v5-c-jump-links__item pf-m-current">
        <a class="pf-v5-c-jump-links__link" href="#">
          <span class="pf-v5-c-jump-links__link-text">Active section</span>
        </a>
      </li>
      <li class="pf-v5-c-jump-links__item">
        <a class="pf-v5-c-jump-links__link" href="#">
          <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

```

### Vertical default

```html
<nav class="pf-v5-c-jump-links pf-m-vertical">
  <ul class="pf-v5-c-jump-links__list" role="list">
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item pf-m-current">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Active section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
  </ul>
</nav>

```

### Vertical with label

```html
<nav class="pf-v5-c-jump-links pf-m-vertical" aria-label="Jump to section">
  <div class="pf-v5-c-jump-links__header">
    <div class="pf-v5-c-jump-links__label">Jump to section</div>
  </div>
  <ul class="pf-v5-c-jump-links__list" role="list">
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item pf-m-current">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Active section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
  </ul>
</nav>

```

### Vertical with inactive subsections

```html
<nav class="pf-v5-c-jump-links pf-m-vertical" aria-label="Jump to section">
  <div class="pf-v5-c-jump-links__header">
    <div class="pf-v5-c-jump-links__label">Jump to section</div>
  </div>
  <ul class="pf-v5-c-jump-links__list" role="list">
    <li class="pf-v5-c-jump-links__item pf-m-current">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Active section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
      <ul class="pf-v5-c-jump-links__list" role="list">
        <li class="pf-v5-c-jump-links__item">
          <a class="pf-v5-c-jump-links__link" href="#">
            <span class="pf-v5-c-jump-links__link-text">Inactive subsection</span>
          </a>
        </li>
        <li class="pf-v5-c-jump-links__item">
          <a class="pf-v5-c-jump-links__link" href="#">
            <span class="pf-v5-c-jump-links__link-text">Inactive subsection</span>
          </a>
        </li>
      </ul>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
  </ul>
</nav>

```

### Vertical with active subsections

```html
<nav class="pf-v5-c-jump-links pf-m-vertical" aria-label="Jump to section">
  <div class="pf-v5-c-jump-links__header">
    <div class="pf-v5-c-jump-links__label">Jump to section</div>
  </div>
  <ul class="pf-v5-c-jump-links__list" role="list">
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Active section</span>
      </a>
      <ul class="pf-v5-c-jump-links__list" role="list">
        <li class="pf-v5-c-jump-links__item pf-m-current">
          <a class="pf-v5-c-jump-links__link" href="#">
            <span class="pf-v5-c-jump-links__link-text">Active subsection</span>
          </a>
        </li>
        <li class="pf-v5-c-jump-links__item">
          <a class="pf-v5-c-jump-links__link" href="#">
            <span class="pf-v5-c-jump-links__link-text">Inactive subsection</span>
          </a>
        </li>
      </ul>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
  </ul>
</nav>

```

### Expandable

```html
<nav
  class="pf-v5-c-jump-links pf-m-vertical pf-m-expandable"
  aria-label="Jump to section"
>
  <div class="pf-v5-c-jump-links__header">
    <div class="pf-v5-c-jump-links__toggle">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Toggle jump links"
        aria-expanded="false"
      >
        <span class="pf-v5-c-jump-links__toggle-icon">
          <i class="fas fa-angle-right" aria-hidden="true"></i>
        </span>
        <span class="pf-v5-c-jump-links__toggle-text">Jump to section</span>
      </button>
    </div>
    <div class="pf-v5-c-jump-links__label">Jump to section</div>
  </div>
  <ul class="pf-v5-c-jump-links__list" role="list">
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item pf-m-current">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Active section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
  </ul>
</nav>

```

### Expanded

```html
<nav
  class="pf-v5-c-jump-links pf-m-vertical pf-m-expandable pf-m-expanded"
  aria-label="Jump to section"
>
  <div class="pf-v5-c-jump-links__header">
    <div class="pf-v5-c-jump-links__toggle">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Toggle jump links"
        aria-expanded="true"
      >
        <span class="pf-v5-c-jump-links__toggle-icon">
          <i class="fas fa-angle-right" aria-hidden="true"></i>
        </span>
        <span class="pf-v5-c-jump-links__toggle-text">Jump to section</span>
      </button>
    </div>
    <div class="pf-v5-c-jump-links__label">Jump to section</div>
  </div>
  <ul class="pf-v5-c-jump-links__list" role="list">
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item pf-m-current">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Active section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
  </ul>
</nav>

```

### Expandable (responsive)

```html
<nav
  class="pf-v5-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl pf-m-expandable"
  aria-label="Jump to section"
>
  <div class="pf-v5-c-jump-links__header">
    <div class="pf-v5-c-jump-links__toggle">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Toggle jump links"
        aria-expanded="false"
      >
        <span class="pf-v5-c-jump-links__toggle-icon">
          <i class="fas fa-angle-right" aria-hidden="true"></i>
        </span>
        <span class="pf-v5-c-jump-links__toggle-text">Jump to section</span>
      </button>
    </div>
    <div class="pf-v5-c-jump-links__label">Jump to section</div>
  </div>
  <ul class="pf-v5-c-jump-links__list" role="list">
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item pf-m-current">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Active section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
  </ul>
</nav>

```

### Expandable (responsive) with no label

```html
<nav
  class="pf-v5-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl pf-m-expandable"
>
  <div class="pf-v5-c-jump-links__header">
    <div class="pf-v5-c-jump-links__toggle">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Toggle jump links"
        aria-expanded="false"
      >
        <span class="pf-v5-c-jump-links__toggle-icon">
          <i class="fas fa-angle-right" aria-hidden="true"></i>
        </span>
        <span class="pf-v5-c-jump-links__toggle-text">Jump to section</span>
      </button>
    </div>
  </div>
  <ul class="pf-v5-c-jump-links__list" role="list">
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item pf-m-current">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Active section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
    <li class="pf-v5-c-jump-links__item">
      <a class="pf-v5-c-jump-links__link" href="#">
        <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
      </a>
    </li>
  </ul>
</nav>

```

## Documentation

### Overview

### Accessibility

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `aria-label` | `.pf-v5-c-jump-links` | Provides an accessible name for the jump links. |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v5-c-jump-links` | `<div>` | Initiates the jump links container. |
| `.pf-v5-c-jump-links__header` | `<div>` | Initiates the jump links header. |
| `.pf-v5-c-jump-links__toggle` | `<div>` | Initiates the jump links expandable toggle. |
| `.pf-v5-c-jump-links__toggle-text` | `<span>` | Initiates the jump links expandable toggle text. |
| `.pf-v5-c-jump-links__toggle-icon` | `<span>` | Initiates the jump links expandable toggle icon. |
| `.pf-v5-c-jump-links__label` | `<div>` | Initiates the jump links label. |
| `.pf-v5-c-jump-links__main` | `<div>` | Initiates the jump links main container for when a label and list is used in the horizontal variation. |
| `.pf-v5-c-jump-links__list` | `<ul>` | Initiates the jump links list. |
| `.pf-v5-c-jump-links__item` | `<li>` | Initiates the jump links list item. |
| `.pf-v5-c-jump-links__link` | `<button>` | Initiates the jump links link. |
| `.pf-v5-c-jump-links__link-text` | `<div>` | Initiates the jump links link text. |
| `.pf-m-vertical` | `.pf-v5-c-jump-links` | Modifies the jump links component to be vertical. |
| `.pf-m-center` | `.pf-v5-c-jump-links` | Modifies the jump links component to center its list and label. |
| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-v5-c-jump-links` | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical jump links only. |
| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v5-c-jump-links` | Modifies the jump links component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
| `.pf-m-expanded` | `.pf-v5-c-jump-links` | Modifies the expandable jump links component for the expanded state. |
| `.pf-m-current` | `.pf-v5-c-jump-links__item`| Modifies the jump links item to be current. |