Change colors on breadcrumbs

[HovKlan-DH]

For this Web Awesome code:

<wa-breadcrumb>
    <wa-breadcrumb-item>Level 1</wa-breadcrumb-item>
    <wa-breadcrumb-item>Level 2</wa-breadcrumb-item>
    <wa-breadcrumb-item>Level 3</wa-breadcrumb-item>
</wa-breadcrumb>

It would be nice if it was possible to easily define the 3 colors in scope here:

• All not-last breadcrumb (Level 1 + Level 2)
• The dividers
• The last breadcrumb (Level 3)

As seen on this Shoelace.style Discord post, then it seems to be black magic how to set these colors - quite complex.

Please implement a better styling option here? 😁

[claviska]

I believe this does what you want it to do.

sl-breadcrumb-item::part(label) {
  color: orange; 
}

sl-breadcrumb-item::part(separator) {
  color: blue; 
}

sl-breadcrumb-item:last-of-type::part(label) {
  color: deeppink; 
}

Example: https://codepen.io/claviska/pen/oNRKGmW?editors=1100

[HovKlan-DH]

I did get this working, including the mouse hover, but the syntax is quite "crazy" - or rather quite complex, if you are not a world champ in "vanilla" CSS.

For WA I would prefer a Bootstrap approach, where this is more class-based, making it quite easy to color/style customize.

[claviska]

I understand where you're coming from. While the ::part() selector is somewhat new, it's quiet powerful. It may help to think of each component as having a box of "parts" inside of it you can target with CSS. Once you know which part you're working with, you can do just about anything with that one selector.

For example, you can target any property of a breadcrumb's "label" part with this selector:

wa-breadcrumb-item::part(label) {
  /* any property you want! */
  font-size: 1.25em;
  color: blue;
  border: solid 1px orange;
}

Compare that to a custom property and you can see where we could easily end up with dozens of variables such as --wa-breadcrumb-item-color, --wa-breadcrumb-item-color-hover, --wa-breadcrumb-font-family, --wa-breadcrumb-font-size, and so on. IMO, a handful of part names is easier to learn than remember dozens and dozens of long-named custom properties. I will admit, however, that we need to do a better job of conveying component anatomies in our docs. (Perhaps visually would help make this more obvious?)

That said, we've added a number of custom properties for common use cases in Web Awesome and we'll continue to identify more as we go. We're trying to find the right balance, so please do call things like this out when you're unsure or feel like there's too much friction :)

[claviska]

By the way — Bootstrap has nearly 1,800 variables which is why I believe a balance is so important.

[HovKlan-DH]

Ahh, I understand this better now and as a newcomer to this library, it would be good with some clear documentation explaining this, and with some good examples. I did read the "Getting Started > Customizing" part of the documentation, but I did not understand this fully, nor the different parts involved with this.

E.g. how to adapt the hover effect - how to access the first or last breadcrumb or how to avoid having a hand-icon when there is no href defined on the breadcrumb.

So yeah, you are probably right that your approach may be better, but I really then would like some copy/paste examples for everything, as this is a fast way to learn/adapt.

Example - if I have this code here:

<wa-breadcrumb>
    <wa-icon slot="separator" name="arrow-right" variant="solid"></wa-icon>
    <wa-breadcrumb-item href="https://example.xyz/home1">Breadcrumb 1</wa-breadcrumb-item>
    <wa-breadcrumb-item href="https://example.xyz/home2">Breadcrumb 2</wa-breadcrumb-item>
    <wa-breadcrumb-item href="https://example.xyz/home3">Breadcrumb 3</wa-breadcrumb-item>
    <wa-breadcrumb-item>Breadcrumb 4</wa-breadcrumb-item>
</wa-breadcrumb>

Then I can have this CSS:

wa-breadcrumb-item::part(separator) {
  color: blue;
}

wa-breadcrumb-item::part(label) {
  border: solid 1px black;
  color: red;
}

wa-breadcrumb-item::part(label):hover {
  color: blue;
}

wa-breadcrumb-item:first-of-type::part(label) {
    font-weight: bold;
}

wa-breadcrumb-item:last-of-type::part(label) {
    color: lightgrey;
}

This would be easy to see then.

[HovKlan-DH]

E.g. how would you actually remove the hand-cursor on breadcrumbs NOT having a link enabled?

[claviska]

That would look something like this:

/* (element)      (last one)   (no link)   (the label part)
wa-breadcrumb-item:last-of-type:not([href])::part(label) {
  cursor: default; 
}

[HovKlan-DH]

Your code of course works, but this is where I see the complexity in this approach - this syntax is not at all easy to understand, and for sure not something that at least I can guess or remember by heart - e.g. the order of all these parts. I would probably need some kind of "cheat sheet" or alike to know these possibilities and what their syntax are.

E.g. you now have shown to me how to do this specifically for not([href]), but what if I instead wanted to actually only do this on links, as e.g. has([href]) does not work.

So yeah, if this approach is "this is how it is", then for sure the documentation part must be much better to understand pitfalls like this 😁