Приветствую, есть сайты, вебшопы, с основным языком немецким и местами очень длинными именами как категорий, сабкатегорий, так и продуктов. Связано это со спецификой языка и деятельности.
В общем, я лично нахожу breadcrumbs не лишним с точки зрения и сео и юзабилити, но вот на маленьких экранах, таблетах и больших телефонах смотрится все ужасно.


На совсем маленьких - 320px etc, breadcrumbs скрываем, но на чуть больших хотим оставить, только как то надо оптимизировать.
Погуглив, нашел вроде бы что то подходящее по смыслу, суть - скрытие информации в табах breadcrumbs, раскрытие по мере необходимости. Как примеры -
вот вот и
вот
Но проблема в том, что это раскрытие происходит по hover по элементу, а на мобильных девайсах hover не вариант.
С другой стороны, если раскрытие привязать к клику, то тут тоже не очень хорошо, так как по клику должен быть уже переход на выбранный уровень.
Что придумать, может кто то уже решал подобную задачу?