@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
530 lines (490 loc) • 18.5 kB
Markdown
---
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. |