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.

  • 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

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.

  • I agree with you, but what if there is no choice but to implement the breadcrumb, pretty long trail of breadcrumb. Is it good to have it on second line? I am not in favour to go to second line but to have a overflow icon. What is your view? Jun 19 '15 at 4:41

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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