Keep long breadcrumb trails usable on small screens

What to change

Ask for a breadcrumb layout that preserves meaningful navigation when labels wrap or the viewport narrows.

A worked example

Illustrative example

A long service path wraps into two readable lines above the page heading without placing a tiny isolated separator over the following content.

How to check the result

Accept when the trail communicates location without causing page-wide horizontal scrolling, clipped targets or a confusing reading order.

A mistake to avoid

Shortening every label to its first word can remove the very distinction the breadcrumb is intended to provide.

Your action checklist

Use these checks to prepare a discussion with your team or supplier. Tick a check when you have recorded the decision or evidence, rather than when a feature has simply been promised.

Decisions to recordChoose the deepest page with the longest names and inspect its breadcrumb on a phone-sized viewport. Check every retained link remains readable and tappable.Enlarge text and use keyboard navigation. Ask the supplier to show how focus remains visible if the trail wraps to several lines.If the design shortens the trail, verify the omitted section can still be understood or reached through a clear control rather than unexplained punctuation.

Evidence, open questions and decisionsNext action and responsible role

Entries stay in this page and are not submitted to Kay & Co. Download your notes before leaving; the page does not save them.