[feat] <rh-breadcrumbs> element

[markcaron]

We need a Breadcrumb component for use across applications and websites.

The good news is that it seems we have a very closely aligned pattern across PatternFly and our web properties already. We will need to have a design spec created for documentation and made available in Figma.

Steps

• Design spec
• Develop web component

Resources

• Related: [feat] <pf-breadcrumb> element patternfly/patternfly-elements#2688
• CSS chevron approach
• PF Breadcrumb spec
• RHDC breadcrumbs
• Portal breadcrumbs

Breadcrumb best practice

From WAI's breadcrumb pattern:

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li>
      <a href="../../../..">
        WAI-ARIA Authoring Practices Guide (APG)
      </a>
    </li>
    <li>
      <a href="../../../">
        Patterns
      </a>
    </li>
    <li>
      <a href="../../">
        Breadcrumb Pattern
      </a>
    </li>
    <li>
      <a href="" aria-current="page">
        Breadcrumb Example
      </a>
    </li>
  </ol>
</nav>

[markcaron]

Worth discussing: should we have a standard version and one with lighter gray chevrons (to lessen the visual noise on long form content)?

PF's design:

• Color: #151515

Use on the Portal:

• Color: #8a8d8d —> which should be #707070 (--rh-color-gray-50)

[adamjohnson]

Figma Design Spec for <rh-breadcrumbs> is available.

[wesleymiles]

Wondering if this one will have guidance for mobile. For example, truncating works when there aren't too many levels like resource pages on WWW, but when there are more levels it would be useful to keep them and maybe have them wrap? (see screenshot)

Or even if we should keep them on mobile or not. Customer portal drops theirs.

[adamjohnson]

@coreyvickery: do you have guidance for breadcrumbs on mobile?

Generally, I think having the text wrap is standard for most orgs.

[coreyvickery]

@coreyvickery: do you have guidance for breadcrumbs on mobile?

Generally, I think having the text wrap is standard for most orgs.

@adamjohnson I would expect the > icon and text to wrap. These templates truncate text which I do not think is helpful. I would prefer it looked like:

Large viewports:

Topics > Understanding cloud computing > What are cloud services?

Small viewports:

Topics > Understanding cloud computing >

What are cloud services?

Even smaller viewports:

Topics > Understanding cloud

computing > What are cloud

services?

I would avoid having the > icon at the beginning of a line if we can.

---

Let me know if you need further guidance like spacing!

[coreyvickery]

@adamjohnson Or we could try another approach similar to IBM Carbon where they are breaking each step at a given container size.

What do you think would be best?

[adamjohnson]

Or we could try another approach similar to IBM Carbon where they are breaking each step at a given container size.

Wrapping is fine.

I would avoid having the > icon at the beginning of a line if we can.

Can do.

Note: the design spec truncates the final breadcrumb item if it's over 27 characters.

Home > About > Longer Breadcrumb Item Righ...

Would you want "Home"/"About" to truncate if they are longer as well?

[coreyvickery]

@adamjohnson No, I think the previous steps should be visible.

I am fine with the last step being truncated because the headline is literally right below.

Instead of the above, I would think it would look like this:

Topics > Application modernization >
What is Java application moderniz ...

Maybe two lines max and then truncation no matter what.

[wesleymiles]

Maybe two lines max and then truncation no matter what.

for longer paths, i wouldn't want to only limit them to two lines

also, if it hasn't been added yet... would be nice to have guidance around how far back to have the path go, for example all the way to "home," and placement / alignment of breadcrumbs on the page -- they're all over the place now

[markcaron]

We could approach it like Google Drive's breadcrumbs. They use text-overflow: ellipsis on the links to visually truncate rather than actually truncate:

And when it nests too deep, it uses a single ellipses to represent more than one level. Clicking the ellipses takes you to whichever "directory" / "link" is the deeper child.

[adamjohnson]

WIP Deploy Preview links:

I wanted to put these WIP Breadcrumb deploy preview links here so that people can see what this looks like now:

• Basic Demo
• Color Context
• Last item not linked
• WIP Deploy Preview Docs (still lots to do here!)

The only truncation happening at the moment is on the current page when it's below 992px. The breadcrumbs <ol> will wrap beyond two lines. Users can modify margin, padding, background colors etc. as needed since this component uses lightdom.

Other libraries:

Here's breadcrumb component examples from other WC libraries that don't truncate and just wrap text:

• Duet
• Shoelace
• Carbon (wraps early!)
• Fast

Looking at Mark's examples (above), that pattern is interesting from a design and engineering point of view; however, I'm not sure how useful that is to the user since, at smaller viewports, you only get 1-2 letters of a word/words.

Atlassian has an interesting take on breadcrumbs, which is somewhat similar to Patternfly. I personally like Atlassian's implementation better, but YMMV.

Proposed solutions

With this in mind, here's the solutions that have been proposed:

1. Wrap, little/no truncation
2. Wrap, truncate longer links (not just the last link)
3. Limit breadcrumbs to two lines, fully truncate

My vote would be to go with option one or two, but am open to other ideas.

[coreyvickery]

@adamjohnson @wesleymiles Thanks for your input, we can show more lines on mobile.

Funny about that Atlassian link, I was typing this last night.

What is the longest path you have seen? Would we ever expect to see something like six links or something? Should we set a link number limit before truncation? Something like this:

Home > Link 1 > ... > Link 5 > Link 6

Or even truncate the Home link:

... > Link 4 > Link 5 > Link 6

[wesleymiles]

What is the longest path you have seen?

• for now, this is as long as docs gets: Home / Products / OpenShift Container Platform / 4.15 / Edge computing
• here's a similarly sized one on WWW: Home / Products / Red Hat OpenShift / Red Hat OpenShift Service on AWS / Learn

also like atlassian's solution. could we set auto-collapse based based on the # of lines? or maybe that's what you mean with your proposal #3 @adamjohnson.

[coreyvickery]

@adamjohnson @wesleymiles I'm going to start a separate Figma file to explore creating more design options. I'm really hoping this can be included in the Charmander release.

[adamjohnson]

I'm prototyping the Atlassian solution now. Would love to see what you come up with, Corey.

[coreyvickery]

@adamjohnson Here are some more explorations and specs.

https://www.figma.com/proto/FSkPCjWTWK63QfSnX8rChZ/rh-breadcrumb?page-id=1%3A3&type=design&node-id=1-218&viewport=122%2C139%2C1&t=AmmdkOlWBdRh2fWu-1&scaling=min-zoom

[coreyvickery]

@adamjohnson Very small updates.

Dev Mode link

Light theme

Default variant

• Link text = blue-50
• Caret = gray-95
• Active page text = gray-95

Subtle variant

• Link text = blue-50
• Caret = gray-50
• Active page text = gray-60

Dark theme

Default variant

• Link text = blue-30
• Caret = white
• Active page text = white

Subtle variant

• Link text = blue-30
• Caret = gray-40
• Active page text = gray-30

[coreyvickery]

@adamjohnson Hover colors in case you need them.

Light theme

• Link text = blue-70

Dark theme

• Link text = blue-20

[markcaron]

Looking at the Figma mockup, I'm thinking we should get out an MVP following the "Responsive approach 1".

If we can get "Responsive approach 2" working in the future with a container controller / query, that would be ideal, and we could upgrade to that in a future version.

[coreyvickery]

@adamjohnson How's it going with this?

[adamjohnson]

@adamjohnson How's it going with this?

Check out the DP at #1535 👍

[marionnegp]

@coreyvickery (and @adamjohnson if you have time), here's a mock up of the breadcrumb docs. Let me know if you see anything that should be included, removed, or edited!