DEV Community

Cover image for CSS Challenges #1 | Breadcrumbs

CSS Challenges #1 | Breadcrumbs

Milan Radojević on October 08, 2019

Submissions Article No Longer Available What is this I'm starting a new series aimed at helping yo...
Read full post
Collapse
 
kyleoliveiro profile image
Kyle Oliveiro •

Cool challenge!

Here's my take: codepen.io/kyle-o/pen/vYYEbdq

Some considerations I made:

  • Added proper aria-* attributes for accessibility.
  • 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.)
Collapse
 
pclaisse profile image
Pascal Claisse •

Here you go codepen.io/pclaisse/pen/KKKwBKZ

Collapse
 
mikister profile image
Milan Radojević • • Edited

Looks awesome, it's about the same as what I did, except I haven't used scss before.

Collapse
 
bryant24 profile image
Ruslan Galiev • • Edited

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.

Collapse
 
mikister profile image
Milan Radojević •

Oh, I'm interested in your reasoning for using span instead of a.

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:

mikister2012 image

Breadcrumbs - Semantics and Accessibility

Milan Radojević ・ Oct 8 ・ 1 min read

#discuss #ui #accessibility #html

Also I see you're using BEM as well 😀. How long have you been doing it and what your experience with it like?

Collapse
 
bryant24 profile image
Ruslan Galiev •

Hi @Milan!

Thank you for your answer. :-)
I use BEM for a long time, it helps a lot on large projects in our team.

Collapse
 
sansk profile image
Sangy K • • Edited

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.

Collapse
 
mikister profile image
Milan Radojević • • Edited

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...

Collapse
 
davide profile image
Davide Scarioni •

Something very very simple:
codepen.io/Scario/pen/gOObjdG

Collapse
 
ashvin777 profile image
Ashvin Kumar Suthar •

Here you go -

View in full screen - jsitor.com/p/VQMV_oPzY
View code - jsitor.com/VQMV_oPzY

Collapse
 
augustoqueiroz profile image
Augusto Queiroz •

My take:
codepen.io/augustoqueiroz/pen/zYYxyrv

Collapse
 
sansk profile image
Sangy K •

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.