The last item is not a link since it represents the current page. Having it as a link would be redundant and might confuse users. (See point 5: nngroup.com/articles/breadcrumbs/).
I used em sizing for elements inside the .breadcrumbs class, and clip-path instead of the CSS triangles technique so that the component is able to scale simply by changing the font size of the .breadcrumbs class. This way, in the context of a larger app, we can easily use font-size utility classes and everything scales nicely without breaking.
Clip path is supported in modern browsers. In browsers that do not support it, the component degrades gracefully to simple rectangles. (An improvement would be to use @supports to modify the spacing between breadcrumbs in non-supported browsers.)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Cool challenge!
Here's my take: codepen.io/kyle-o/pen/vYYEbdq
Some considerations I made:
aria-*attributes for accessibility.emsizing for elements inside the.breadcrumbsclass, and clip-path instead of the CSS triangles technique so that the component is able to scale simply by changing the font size of the.breadcrumbsclass. This way, in the context of a larger app, we can easily usefont-sizeutility classes and everything scales nicely without breaking.@supportsto modify the spacing between breadcrumbs in non-supported browsers.)