User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I would like to use breadcrumbs on my responsive site. Breadcrumbs become less recognisable if the links wrap as the layout is then less recognisable. This creates an issue for my site as the width and number of links vary.
In the interest of future maintenance and keeping my CSS clean I dont want to have to resize the breadcrumbs on multiple pages for different screen widths.
You have a few options. I like the responsive "where am i?" breadcrumbs as demonstrated here. This option has the full breadcrumb trail in large windows and shrinks to only show custom text (such as "Where am I?") in narrow windows and on mobile devices. Example:
Full screen:
Home > Section 1 > Section Title That is Longer
Becomes:
Where Am I? >
There's also the breadcrumbs that turn into a back link, which show the full breadcrumbs in large windows and just show the word, "back" on small windows but the user could just use their "back" button. This one looks like this on mobile:
< Back
There is a responsive breadcrumbs jQuery that truncates the breadcrumbs in narrow windows and adds an ellipsis ... to shortened breadcrumbs when the page is narrow (demo). Example:
Full screen:
Home > Section 1 > Section Title That is Longer
Becomes:
Home > Section 1 > Section Title...
