recentpopularlog in

abberdab : breadcrumb   3

Dropdown Breadcrumbs
Dropdown Breadcrumbs

A breadcrumb solution that exposes the last item for small screens and reveals the rest of the items in the trail when clicked. The entire trail is exposed when space becomes available.

Pros
Saves space by only exposing the last element in the breadcrumb trail.
Small screen users are still able to traverse the breadcrumb trail

Cons
Accordion-like control doesn't necessarily map nicely to breadcrumb interaction
JS dependancy - not necessarily a con, but worth keeping in mind that the Javascript dependency means more testing and consideration
navigation  patterns  breadcrumb  responsive 
june 2018 by abberdab
Progressively-Enhanced Breadcrumb Navigation
A progressively-enhanced breadcrumb navigation pattern that allows for sibling pages to be easily accessible at every level via dropdown menus.

1. Baseline
We start with a traditional breadcrumb navigation as our baseline experience to ensure the component works for all users.

2. Sub-Menu Toggle
If Javascript is enabled, we then make the top level link a toggle which reveals the nested sub-menu when clicked or tapped.

3. :hover Support
If :hover is truly supported, then we allow for sub-menus to be revealed on mouseover and we remove the toggle functionality on the top-level link.
navigation  breadcrumb  progressive-enhancement 
june 2018 by abberdab
Breadcrumbs Navigation
Slick li’l drop down navigation for breadcrumbs. No js required!
navigation  examples  breadcrumb  css-only 
october 2017 by abberdab

Copy this bookmark:





to read