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.)
Minimalist, an aspiring web dev, comp-sci student, hacker, gamer and a linux enthusiast. I like meeting other nerdy people and seeing what they're doing.
Minimalist, an aspiring web dev, comp-sci student, hacker, gamer and a linux enthusiast. I like meeting other nerdy people and seeing what they're doing.
Minimalist, an aspiring web dev, comp-sci student, hacker, gamer and a linux enthusiast. I like meeting other nerdy people and seeing what they're doing.
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.)Here you go codepen.io/pclaisse/pen/KKKwBKZ
Looks awesome, it's about the same as what I did, except I haven't used scss before.
Hi All,
Nice to join the challenges.
I guess it's not to late to join.
Here's my submission for 'Breadcrumbs'.
codepen.io/skay/full/bGGeraq
Used simple CSS selectors and properties.
Hi all!
My example: codepen.io/bryant---24/pen/qBBEyjB
In my example, I used 'span' tag, as I think, since it will be semantically correct.
Oh, I'm interested in your reasoning for using
spaninstead ofa.Also if it doesn't bother you I've created a separate post for discussing this topic, so if you could pitch in there it'd be appreciated:
Breadcrumbs - Semantics and Accessibility
Milan Radojević ・ Oct 8 ・ 1 min read
Also I see you're using BEM as well 😀. How long have you been doing it and what your experience with it like?
Hi @Milan!
Thank you for your answer. :-)
I use BEM for a long time, it helps a lot on large projects in our team.
Something very very simple:
codepen.io/Scario/pen/gOObjdG
If you want to follow this series on twitter, I've created a Moment to collect all the tweets for this series: twitter.com/i/moments/118141162861...
Here you go -
View in full screen - jsitor.com/p/VQMV_oPzY
View code - jsitor.com/VQMV_oPzY
My take:
codepen.io/augustoqueiroz/pen/zYYxyrv
Hi All,
Nice to join the challenges.
I guess it is not too late to join the challenge.
Here is my submission.
codepen.io/skay/full/bGGeraq
Used simple selectors and properties.