Как раз решаю сейчас подобную проблему -
Как лучше поступить с breadcrumbs на мобильных девайсах? - очень длинные названия категорий и особенно продуктов в breadcrumbs, на мобильных вообще все ужасно.
Выбрал из предложенных один вариант - чуть его преобразовываю сейчас -
https://codepen.io/lagudal/pen/KxGpQj
Главная проблема - то что в реальной мобильной версии нет hover, вернее, он работает не так как в десктопной.
Т.е. если знаешь, что надо осторожненько нажать и держать, чтобы раскрыть, а потом уже кликать, если есть необходимость. Проблема, что прикосновение, даже очень нежное, очень уж часто есть сразу клик.
Кстати, такая же точно проблема, когда пункт верхнего уровня дропдаун-меню сам содержит ссылку, например, на категорию, а не только hover по нему раскрывает вложенные уровни меню с подкатегориями.
Есть мысль, прикрутить класс или id, который будет добавляться только на разрешениях для таблет и мобайл, а на этот класс или id повесить посредством js события - по первому клику на элемент - раскрыть элемент, по второму или последующим кликам - уже перейти по ссылке.