Breadcrumbs RFC 🍞

[AndreiBaicu26]

Breadcrumbs

Breadcrumbs show hierarchy and navigational context for a user’s location within an app.
Spectrum CSS documentation

Usage

Adding your dependency:

yarn add @spectrum-web-components/breadcrumbs

Import and register the component <sp-breadcrumbs>:
import ‘@spectrum-web-components/breadcrumbs/sp-breadcrumbs’;

Importing the base class of the Breadcrumbs component as a type or for extension purposes:

import { Breadcrumbs } from ‘@spectrum-web-components/breadcrumbs’;

Examples

As for a first release, the breadcrumbs component can accept markup items as its children.

<sp-breadcrumbs>
     <sp-breadcrumb-item href=”my-url”>Home</sp-breadcrumb-item>
     <sp-breadcrumb-item href=”my-url”>Files</sp-breadcrumb-item>
</sp-breadcrumbs>

The Breadcrumb item will extend LikeAnchor mixin so it feels and behaves as an tag.

Customization

To support multiple themed consumers the component should provide the following customizations

• Menu icon - allow consumers to change the icon of the menu

Properties and attributes

• disabled: boolean - Setting the disabled state of the breadcrumbs element
• showRoot: boolean - Display the first item in the list, spectrum design
• maxItems: number - When to truncate the items under a menu, spectrum design. As per the spectrum design the default max items should be set to 4.
• multiline: boolean - Display the last item under other breadcrumbs as a title, spectrum design, if false, “compact” is used.

Notes:
When the disabled attribute is set, the breadcrumb component should be responsible to also disable the action-menu and the children that are slotted e.g. <sp-breadcrumb-item>.

Breadcrumb-item

A list item in the spectrum-css library represents both the <a> tag / action-menu and the separator. Also the css classes that they provide are .spectrum-Breadcrumbs-item and .spectrum-Breadcrumbs-itemLink with the latter being used on both and action-menu.

The <sp-breadcrumb-item> will support the disabled state and will hold the necessary markup for the consumer.

A more complex example:

<sp-breadcrumbs>
<foo-icon slot=”menu-icon”></foo-icon>
 <sp-breadcrumb-item href=”my-url”> 
      HOME
 </sp-breadcrumb-item>
  <sp-breadcrumb-item href=”my-other-url”> 
      Files
 </sp-breadcrumb-item>
</sp-breadcrumbs> 

When multiple are provided, the sp-breadcrumbs component should internally decide which breadcrumb-items to show inside the action menu and inside an actual sp-breadcrumb-item.

Slots

• menu-icon: Render a custom icon for the action menu

Events

Open question: Would there be a use case where the consumer needs an event when an item is clicked ?

Dependencies

To achieve the breadcrumbs design we will require the following SWC dependencies:

• Chevron icon, separator between links - @spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js - Could also be chevron500 ?
• Action Menu quiet mode, opening the menu item - @spectrum-web-components/action-menu/sp-action-menu.js - lazy dependency
• Truncated, sp-truncated element that truncates a text and shows a tooltip with the label- lazy dependency
• Spectrum base, for lit specific imports - @spectrum-web-components/base

Behavior

Overflowing

There are 4 different ways of rendering the items of the breadcrumbs.

1. Default view.

The number of the items provided is less than the maxItems attribute.

2. Multiline view

The multiline attribute is set to true. The breadcrumbs will emphasize the last item.

3. Rendering the menu item
   There are more items provided than maxItems or the breadcrumbs would overflow the parent container. This behavior will render a menu that holds all the items.

Implementation suggestion:

As a first approach, we could attach a ResizeObserver on the parent element inside the connectedCallback method and get rid of it on disconnectedCallback. We would keep all these items in an array and we could conditionally render an action-menu based on two conditions:

• If the length of the array is higher than maxItems then we should render the menu.
• We can calculate a threshold between the parent element width and the component’s width. If the threshold is reached then render the menu

Only one case would remain, when we only render the menu and the selected item. If the parent is too narrow (checking the threshold mentioned above) we can apply trailing dots to the selected element and render a tooltip with the label.

For this use case, the component will make use of a new helper “Truncated” that renders a tooltip when a text renders trailing dots. https://git.corp.adobe.com/pages/DIWI/unified-experience-components/main/labs/truncated/

Rendering the root.
When the showRoot attribute is present, the component should render the first item as the root.
In this situation, there are a few edge cases we can encounter:

• Happy path - The component renders the root, the menu and the rest of the remaining items until the width of the parent container is filled.
• The parent container is slightly narrow - If the root item cannot be rendered in the available horizontal space, it will be collapsed into the menu regardless of showRoot.
• The parent container is narrow - The component will only render the menu and the current selected item. The selected item will have trailing dots and a tooltip should be used to display the label.

Focus

The breadcrumb component supports tabbing navigation throughout its items. When pressing tab, the focus should move between the items inside the breadcrumb except the last item (the selected item).
If the focus is on the menu, pressing enter or space should open the menu, allowing the user to select any other item.
When the menu is opened and the user presses the tab key, the menu will close and the focus will move to the next focusable element.

RTL

For right-to-left languages, breadcrumbs should be right aligned, with the order of hierarchy mirrored. The root should be farthest right, and the user’s current location farthest left. The breadcrumb separator icon should also be mirrored and point to the left.

Accessibility

We should investigate the right way to include suggestions from https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/ in this context. We might not be leveraging <nav> and <ol><li> relationships, but the information that they provide a user via screen readers will need to be supplied via alternative means.

[najikahalsema]

Nice work! I think the right size for the chevron is 100 rather than 500.

My only other concern is the usage of ue-truncated, since it's a package from a private repository 🤔 We haven't had imports from UEC into SWC yet, so I'm wondering if and/or how it will work. Do we need to set something up to make it available for use in SWC? @Westbrook @hunterloftis

[AndreiBaicu26]

Hi @najikahalsema Thanks for reviewing this 💯. Currently I moved the implementation of the ue-truncated inside SWC since it's a pretty simple component. We might consider exporting it from SWC and re-using it in UEC later.

[Westbrook]

This points to the benefit of a stand alone PR that brings in Truncated before starting the Breadcrumb work. Makes sense to include this as a "Tool" so that we can use it in other cases as needed, as well.

[AndreiBaicu26]

#4125 💯

[Rocss]

We have use cases where a sp-breadcrumb-item click would not change the route.
We should also have the option not to pass href attributes, but listen to events such as sp-breadcrumb-item-selected and let the consumer decide what to do with it further.

[Westbrook]

Should this be something that like an <a> was event.preventDefault()ed rather than leveraging an expanded evening API?

[Rocss]

Yep, maybe the same logic that's in the sp-sidenav and sp-sidenav-item?

[Westbrook]

I don’t know it off the top of my head, but cross library normalisation is always a win!

[Rocss]

I stumbled upon a CSS limitation while implementing this component's API:

Given that we have the slotted <sp-breadcrumb-item> approach, we would need to translate this CSS:

.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink

Now, this would translate into something very complicated, which does not even work:

:host([multiline]) ::slotted(sp-breadcrumb-item:last-of-type)::part(link)

Explanation:
This CSS needs to be inside breadcrumbs.css file, because of the multiline attribute, which is present on sp-breadcrumbs.
given that we provide <sp-breadcrumb-item> children, CSS becomes ::slotted(sp-breadcrumb-item:last-of-type) which in the end works fine.

However, when trying to style the link of the last sp-breadcrumb-item when the sp-breadcrumbs has multiline, I end up not being able to target this link, given that it is inside the shadow root if the sp-breadcrumb-item.

Any suggestions on how can this CSS be improved/organized?
cc: @najikahalsema / @TarunAdobe

[Westbrook]

What are the rules inside of this selector? Can they be applied via --mod- properties in an alternate CSS delivery?

[Rocss]

Yes they do have --mod tokens: https://github.com/adobe/spectrum-css/blob/main/components/breadcrumb/index.css#L231

LE: not all of them can work with mod tokens, for example: https://github.com/adobe/spectrum-css/blob/main/components/breadcrumb/index.css#L168 sets new properties.

[Westbrook]

This is more a question in how we can support the CSS team in writing more flexible rules here. In the case that there are already custom properties managing these values somewhere they should be able to work with that technique to deliver styles that are consumable by the custom element context herein.