DEV Community 👩‍💻👨‍💻

Discussion on: CSS Challenges #1 | Breadcrumbs

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