CSS Challenges #1 | Breadcrumbs

#css #challenge #easy #ui

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

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

Top comments (17)

Kyle Oliveiro • Oct 9 '19

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