How You Should Display Breadcrumbs on Mobile

Designing for deep navigation hierarchy

When users navigate deep into a website, they leave behind a hierarchical trail of pages. This hierarchical trail is known as breadcrumbs. Breadcrumbs allow users to navigate back to previous pages with ease. They also give context to the user’s current navigational path.

While desktop users can benefit from breadcrumbs, mobile users cannot if you try to display them the same way. Mobile screens have limited horizontal space that would cut off the breadcrumbs. Therefore, you can’t design breadcrumbs on mobile the same way you would on desktop.