Question

I’m currently struggling with the problem of trimming a breadcrumb navigation so it doesn’t destroy my site’s design.

The problem is the following: The breadcrumb navigation has a fixed width (let’s say 900px) – So, if the user navigates to an item whose location results in a breadcrumb that is larger than 900px I’d have to trim it to fit into the design.

So, the part where I’m stuck is this: How can I decide how much to trim and where to trim? I figured out that I could just trim the overflow of text in the middle of the breadcrumb, so it would result in

Some > Navigation > That > … > is > too > long

But how can I decide where to cut? And how will I be able to preserve the anchors of the elements from being trimmed?!

I’m really stuck on this, is there any accepted way to deal with such issues?!

Answer 1

Keep the root element, remove following elements until the breadcrumb fits. I’d actually recommend you to do this in JavaScript as then you’d have methods to calculate the pixel width of the breadcrumb, whereas in PHP you’d have to use a fixed number of characters as the break point which would always result in different lengths. Using JS would be better anyways for SEO and such, as the links would still be there, only hidden.

Assuming you have a simple list element as your breadcrumb:

<ul id="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/products/">Products</a></li>
    <li><a href="/products/hats/">Hats</a></li>
    <li><a href="/products/hats/large/">Large</a></li>
    <li><a href="/products/hats/large/red/">Red</a></li>
    <li><a href="/products/hats/large/red/round/">Round</a></li>
</ul>

You can then trim the length like this (using jQuery):

if($('#breadcrumb').width() > 900) {
    $('#breadcrumb li:first').after('<li>...</li>');

    while($('#breadcrumb').width() > 900) {    
        $('#breadcrumb li').eq(2).remove();
    }
}

A simple example and probably doesn’t work, but should give you some idea.

BTW, if you want to do the trimming in PHP, you have to do it when the breadcrumb is being formed if you want to keep it simple. If you start trimming afterwards, you’d have to resort to some pretty complex regular expressions or to including some kind of DOM parser in your project to keep the anchor tags intact.