CSS Challenges #1 | Breadcrumbs

Submissions

Article No Longer Available

What is this

I'm starting a new series aimed at helping you improve your css skills by challenging you to recreate a suggested feature or element. I'll only be posting things that will be of use when building your websites or apps. So no code golf or obscure stuff.

This is a weekly challenge, so every Monday there will be a new thing for you to build. Also every Monday, alongside the challenge, I'll give a suggested solution to last weeks' challenge.

Post links to your solutions (codepens, jsfiddles, etc.) in the comments if you solved the challenge.

Breadcrumbs

So the first challenge is to make breadcrumbs. Commonly used in larger websites as secondary navigation.

Requirements

• parent element that holds individual items should use the nav tag
• each item uses a tag for links
• each item is somehow separated, either with text (> or /, traditional) or visually (modern)
• last item should have special styling

---

Read More

• SMASHING Magazine - Breadcrumbs In Web Design: Examples And Best Practices

Comments

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

[Pascal Claisse]

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

[Milan Radojević]

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

[Sangy K]

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.

[Ruslan Galiev]

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.

[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:

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?

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

[Milan Radojević]

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

[Davide Scarioni]

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

[Ashvin Kumar Suthar]

Here you go -

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

[Augusto Queiroz]

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

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