## Examples

### Basic


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

<LiveExample html={Example1} />

### Without home link


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

<LiveExample html={Example2} />

### With heading


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

<LiveExample html={Example3} />

### With menu dropdown


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

<LiveExample html={Example4} />

### With buttons


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

<LiveExample html={Example5} />

## Documentation

### Overview

A breadcrumb is a list of links to display a user's navigational hierarchy. The last item of the breadcrumb list indicates the current page's location.

* `.pf-v6-c-breadcrumb__list` is the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.

In the event that a page does not have a traditional `<h1>` page title, a heading can be included in the breadcrumbs and an optional link within.

### Accessibility

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `aria-label="[landmark description]"` | `.pf-v6-c-breadcrumb` |  Describes `<nav>` landmark. |
| `aria-label="[link name]"` | `.pf-v6-c-breadcrumb__link` | If link has no text (icon), add an aria-label. |
| `aria-current="page"` | `.pf-v6-c-breadcrumb__item`, `.pf-v6-c-breadcrumb__link` |  Indicates the current page within a set of pages. |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-breadcrumb` | `<nav>` | Initiates a primary breadcrumb element. **Required** |
| `.pf-v6-c-breadcrumb__list` | `<ol>` | Initiates default breadcrumb ordered list. |
| `.pf-v6-c-breadcrumb__item` | `<li>` | Initiates default breadcrumb list item. |
| `.pf-v6-c-breadcrumb__item-divider` | `<span>` | Initiates default breadcrumb list item divider. |
| `.pf-v6-c-breadcrumb__link` | `<a>`, `<button>` | Initiates default breadcrumb list link. |
| `.pf-v6-c-breadcrumb__title` | `<h1>` | Initiates breadcrumb header. |
| `.pf-m-current` | `.pf-v6-c-breadcrumb__link` | Modifies to display the list item as the current item. |