breadcrumb navigation is a hierarchical style of navigation that tells you where you are in the hierarchy.
It can follow a pattern similar to:
Homepage → Parent group → Parent group → Current page
On wide screens this pattern is not usually problematic, but on mobile it can be more tricky.
There are several approaches, here are some:
- Let it wrap over several lines, it might take up a lot of valuable vertical real-estate.
- Leave it on one line, the user has to scroll horizontally to see the other options, which side do you show? the tail end or the current end?
- Give each segment a
text-overflow: ellipsis. You’d end up with something like:
Homep… → Paren… → Paren… → Curre…
- Hide a vertical version under a button