• Home
• org.mvnpm.at.patternfly
• patternfly
• 6.0.0
• source code
• JumpLinks.md

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

package.docs.components.JumpLinks.examples.JumpLinks.md Maven / Gradle / Ivy

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

### Horizontal default

```html


```

### Horizontal with centered list

```html


```

### Horizontal with label

```html





```

### Vertical default

```html


```

### Vertical with label

```html


```

### Vertical with inactive subsections

```html


```

### Vertical with active subsections

```html


```

### Expandable

```html


```

### Expanded

```html


```

### Expandable (responsive)

```html


```

### Expandable (responsive) with no label

```html


```

## 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` | `
` | Initiates the jump links container. |
| `.pf-v6-c-jump-links__header` | `
` | Initiates the jump links header. |
| `.pf-v6-c-jump-links__toggle` | `
` | Initiates the jump links expandable toggle. |
| `.pf-v6-c-jump-links__toggle-text` | `` | Initiates the jump links expandable toggle text. |
| `.pf-v6-c-jump-links__toggle-icon` | `` | Initiates the jump links expandable toggle icon. |
| `.pf-v6-c-jump-links__label` | `
` | Initiates the jump links label. |
| `.pf-v6-c-jump-links__main` | `
` | Initiates the jump links main container for when a label and list is used in the horizontal variation. |
| `.pf-v6-c-jump-links__list` | `
` | Initiates the jump links list. |
| `.pf-v6-c-jump-links__item` | `
` | Initiates the jump links list item. |
| `.pf-v6-c-jump-links__link` | `` | Initiates the jump links link. |
| `.pf-v6-c-jump-links__link-text` | `
` | 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](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **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](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
| `.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. |