Codepen: Responsive Breadcrumbs

June 18, 2020 - By ArleyM

I love Codepen, and don’t doodle around with it nearly as much as I should.

I recently discovered that my most viewed Pen was an idea Karl Stahl and I worked on in 2014; Responsive Breadcrumb navigation; this gem uses jQuery and floats to turn a desktop’s breadcrumbs into a list of links. Neat.

I still love this idea, so I recently modernized it. Rather than floats, flexbox. Rather than jQuery, vanilla JS. More accessible with semantic HTML5 tags and Aria, then I made it keyboard navigable to boot (I’ve never used :focus-within before). The 2020 edition of Responsive Crumbs is forked here.

See the Pen Responsive Breadcrumb Sitemap 2020 by Arley McBlain (@ArleyM) on CodePen.

I’m feeling a bit braggy about the results, particularly for a11y. Missing points for not having HTTP/2

Breadcrumbs area really great UI paradigm, just don’t think too much about the etymology of the name from Hansel and Gretel;

"Breadcrumb navigation" – a UI pattern named after an element of a German fairy tale, about a witch trying to cannibalize children, but being murdered instead.
— Arley McBlain 🇨🇦 (@ArleyM) June 18, 2020

Categorized in: Personal

This post was written by ArleyM