Skip to content

[feat]: Create <pf-v6-breadcrumb> element #2688

Open
Open
[feat]: Create <pf-v6-breadcrumb> element#2688
Labels
1:1Aligning components with PatternFly v4featureNew feature or requestfor devgood 1st issueGood for newcomers to the project; requires at least an introductory knowledge of the languagenew component requestpriority: mediumSeverity level: 2red hack dayGood issue for Red Hack Day
Milestone
PatternFly Elements 6

Description

@markcaron
markcaron
opened on Jan 24, 2024

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
    1. React `BreadcrumbItem` props: `to` (href), `isActive` (current page), `target`, `component` (`a` or `button`)
    2. React `BreadcrumbHeading` - last item rendered as heading for landmark navigation
    3. React `showDivider` - deprecated in v6; dividers are CSS-only (::before/::after pseudo-elements)
    4. Active/current item: `aria-current="page"` on the last item's link
    5. Slotted `` elements should render as `
    6. ` wrapping an `` or ``

Checklist

Implementation

  • API per `.claude/ADVICE.md`
  • CSS uses v6 tokens, logical properties, nesting
  • `@summary` and JSDoc on element class
  • Renders `
      ...
    ` structure

Demos

  • Demos match patternfly.org naming/structure
  • CSS custom properties match computed styles from patternfly.org (Chrome MCP)
  • Visual parity verified via Chrome MCP

Tests

  • Public API covered (attributes, properties, events, slots)
  • `a11ySnapshot` assertions

Reviews

  • `/review-api` passes
  • `/review-demos` passes
  • `/review-a11y` passes
  • `eslint` and `stylelint` pass

Ship

  • Add changeset
  • PR targets `staging/pfv6` (NOT `main`)

Activity

  1. markcaron
    added
    featureNew feature or request
    good 1st issueGood for newcomers to the project; requires at least an introductory knowledge of the language
    new component request
    on Jan 24, 2024

  2. markcaron commented on Jan 24, 2024

    @markcaron
    markcaron
    on Jan 24, 2024
    ContributorAuthor

    CSS chevron on a pseudo-element

    This should get it roughly the same size as PF's design, though modify as needed:

    a::after {
    content: "";
    position: relative;
    top: 0.75em;
    right: 0;
    display: inline-block;
    margin: 0 0.5em;
    width: 1.05em;
    height: 1.05em;
    box-shadow: inset 0.25rem 0.25rem 0 0.0625rem #151515;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: translateY(-0.5em) rotate(135deg) scale(.5);
}
  3. markcaron
    added
    red hack dayGood issue for Red Hack Day
    on Jun 13, 2024

  4. markcaron commented on Jun 13, 2024

    @markcaron
    markcaron
    on Jun 13, 2024
    ContributorAuthor

    Good first issue.

    Worth looking at @adamjohnson's PR in RHDS: RedHat-UX/red-hat-design-system#1535

  5. bennypowers
    added
    1:1Aligning components with PatternFly v4
    on Sep 19, 2024
  6. markcaron
    added this to Red Hat Design Systemon Aug 19, 2025
  7. markcaron
    moved this to Backlog in Red Hat Design Systemon Aug 19, 2025
  8. bennypowers
    added this to the PatternFly Elements 6 milestone on Apr 15, 2026
  9. bennypowers
    added
    for dev
    on Apr 15, 2026
  10. bennypowers
    changed the title [-][feat] `<pf-breadcrumb>` element[/-] [+][feat]: Create `<pf-v6-breadcrumb>` element[/+] on Apr 15, 2026
  11. bennypowers
    added
    priority: mediumSeverity level: 2
    on Apr 15, 2026
  12. bennypowers
    added a parent issue on Apr 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    1:1Aligning components with PatternFly v4featureNew feature or requestfor devgood 1st issueGood for newcomers to the project; requires at least an introductory knowledge of the languagenew component requestpriority: mediumSeverity level: 2red hack dayGood issue for Red Hack Day

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions