Deep trails need a middle-truncation strategy
Aliases: ellipsis in trail · keep first and last
What it is
Once a hierarchy is deep, the full ancestor string outruns available width. Breadcrumb middle truncation collapses the middle ancestors into an ellipsis while keeping both ends: the root (the entrance to the whole tree) and the current node plus its nearest parent (where I am, and the level above). What is dropped is the middle, whose wayfinding value is lower — not the two ends.
Why it happens
When people read a crumb they first use the current segment (confirming place) and the segment to its left (the nearest parent, the jump they are most likely to make). The root anchors “the whole tree is still here”, so the path does not look like a fragment with no origin. Middle levels are rarely tapped for orientation: they are not now, not one level up, and not back to the entrance. When width runs out, cutting the middle damages the task least.
The ellipsis must still restore. An inert “…” deletes those ancestors from the tree; opening it should list the hidden nodes in hierarchical order, not jump to a random page. Truncating from the tail (showing only early segments) cuts off the current node and orientation fails. Truncating from the head (showing only later segments) loses the root and the path becomes a floating local chain. Both are worse than middle truncation.
Names themselves also spend width. The current title is often the longest string, but it is the subject of orientation and should not be the first thing turned into an ellipsis. When it overflows, ellipsize inside the current segment and keep the nearest parent fully readable.
Where it stops holding
Three levels or fewer do not need truncation; forcing an ellipsis makes a short path look damaged. On mobile even three levels may not fit; then keep “parent / current” first. The root may go into the ellipsis menu, but do not leave only the current segment — that is no longer a path. Screen readers need the full ancestor chain; visual truncation must not become missing names in the accessible tree. If which levels are omitted is re-laid out on every navigation, the path flickers and people cannot learn which segment is tappable.
Applying it
- When width runs out, keep in this order: current, nearest parent, root, then the remaining middle. Put the middle in an openable ellipsis that lists hidden ancestors.
- Do not chop the path from the head or the tail, and do not use horizontal scrolling as the main strategy — scrolling will throw the root or the current node out of view.
- If the current segment is too long, ellipsize inside that segment; do not evict the parent to keep a full title.
- How to check: open the deepest leaf at the narrowest layout and confirm the root is still available (on the bar or in the ellipsis), the nearest parent is fully readable, and the current node is visible. Opening the ellipsis must restore the middle in order. Walk the same trail with assistive technology; the full chain must still be reachable.