Codepen: Responsive BreadcrumbsJune 18, 2020 -
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.
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;
Categorized in: Personal
This post was written by ArleyM