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 max-width and text-overflow: ellipsis. You’d end up with something like: Homep… → Paren… → Paren… → Curre…
• Hide a vertical version under a button

information architecture

#definition