Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I want to make a path-based breadcrumb with pure css and am considering 'sliding' it when the path is too long.

For example:

path 1 > path 2 > path 3 > .......... > path n

If the breadcrumb is too long to be shown in a single line. Would this be an intuitive breadcrumb to implement?

The drawback of this approach means path 1 and path 2 may be hidden when user moves cursor to path n.

share|improve this question
1  
Are you after technical advise as to how to implement this feature, or are you just looking for advice about whether this is a good feature to include in your site? –  JonW May 28 '12 at 7:50
    
@JonW i think he is asking technical side of it and needs to be moved from here "I want to make a path-based breadcrumb with pure css"...anyways lets wait for his view –  sree May 28 '12 at 9:13
    
I've edited the question to bring it more on-topic for this site. It previously read more like a 'how can I do this in CSS', and technical implementation questions are not on-topic for this site. –  JonW May 28 '12 at 9:14
    
Do you actually mean putting "..." in the breadcrumbs, or just making it two lines? A two line breadcrumb is discussed here ux.stackexchange.com/questions/2713/… but if you were asking should you put ... In a breadcrumb I'd say definitely not. Wastes space, means nothing to the user, and defeats the purpose of a breadcrumb navigation. –  Earle May 28 '12 at 12:58
    
how would you do this with 'pure css'? –  DA01 May 28 '12 at 22:06
add comment

2 Answers

I don't know the particular scenario in question here, but if the breadcrumb is too long to be shown in a single line then there is already too much information for the user to care about and you should consider simplifying what is displayed, not trying to find a way to squeeze more information than necessary into a space that is not big enough to hold it.

By adding sliding functionality, you would be over-complicating a mechanism which is meant only to serve as an aid alongside the primary navigation structure.

One common reason for breadcrumbs to become very long is that the text for the elements is taken from a source that was never designed for breadcrumbs, such as the titles for pages or faceted navigation or the primary navigation itself, including mega dropdowns.

I'd really suggest removing the problem rather than expending effort to incorporate the problem because then - you'll have two problems.

share|improve this answer
add comment

If the effect is implimented correctly without distracting the users too much then this can be done intuitively. There are many examples that you could look at if you google jquery breadcrumbs - just to see the effect.

One that particularly comes to mind is xBreadcrumbs. Look at example 2 when you hover over one of the slightly hidden breadcrumbs.

Demo example 2: http://www.ajaxblender.com/script-sources/xbreadcrumbs/demo/index.html

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.