Trimming a breadcrumb

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.

Answer 2

Assuming you don't want the breadcrumbs to do a break when the reach the end, here is what you do.

Use a function that truncates words that are too long. So make a decision of how long the longest word should be. After a certain point instead of continuing to display it, you do the usually ... at the end of the word and continue on to the next part of the breadcrumb.

Take a look at this page.

http://www.the-art-of-web.com/php/truncate/

Answer 3

I do realize that my solution is more design-oriented than programming, but personally, I wouldn't trim the breadcrumbs. Instead, if the breadcrumbs content exceed 900px, I would overlay a png that goes from fully opaque to full transparency and simply make it look like the first part of the breadcrumbs fades out. Then with jQuery, I would scroll the breadcrumbs either left or right, depending on the mouse position over it (based on percentage from left of right margin, where center is either 0% or 100%). In the same manner, I would then use a flipped version of the same transparent png image on the right side, for when the cursor is closer to the left margin.

Here's an example to better illustrate what I'm saying:

Hope this helps !

Answer 4

Tatu Ulmanen has a good idea. But looks should replace li with span. Later will not fill a whole line. ref http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript