12

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.

9

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...
  • 1
    Can you leave some details from those links, rather than just getting everyone to follow those links for the examples? If those links go down then this answer will be useless. An answer needs to be self-contained, but use links as citations for the references. – JonW Jan 13 '15 at 15:35
  • 1
    Thank you for the suggestion, Jon. I expanded my answer to explain the links. – PixelGraph Jan 13 '15 at 17:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.