How to use breadcrumbs in a responsive layout?

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.

Answer

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...