Summary
Create `` to implement the PatternFly v6 Breadcrumb component.
Page hierarchy navigation trail showing the user's location within the application.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
-- |
-- |
| cockpit |
-- |
-- |
| chickadee |
`` |
Exists |
Sub-components
- `` - Individual breadcrumb link
Design
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with `@patternfly/react-core` Breadcrumb
- MAY adjust element API to leverage web platform strengths
- SHOULD maintain CSS custom property theming compatibility
- SHOULD expose useful CSS shadow parts
Element-specific considerations
- Renders as `` containing `
` - required for WAI-ARIA breadcrumb pattern
- React `BreadcrumbItem` props: `to` (href), `isActive` (current page), `target`, `component` (`a` or `button`)
- React `BreadcrumbHeading` - last item rendered as heading for landmark navigation
- React `showDivider` - deprecated in v6; dividers are CSS-only (::before/::after pseudo-elements)
- Active/current item: `aria-current="page"` on the last item's link
- Slotted `` elements should render as `
- ` wrapping an `` or ``
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create `` to implement the PatternFly v6 Breadcrumb component.
Page hierarchy navigation trail showing the user's location within the application.
Prior Art
Sub-components
Design
Requirements
Element-specific considerations
` - required for WAI-ARIA breadcrumb pattern- React `BreadcrumbItem` props: `to` (href), `isActive` (current page), `target`, `component` (`a` or `button`)
- React `BreadcrumbHeading` - last item rendered as heading for landmark navigation
- React `showDivider` - deprecated in v6; dividers are CSS-only (::before/::after pseudo-elements)
- Active/current item: `aria-current="page"` on the last item's link
- Slotted `` elements should render as `
- ` wrapping an `` or ``
Checklist
Implementation
...
` structureDemos
Tests
Reviews
Ship