Trimming A Breadcrumb

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

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

Solution 2:

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 !

Solution 3:

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/