How is this done, and what's it called?

I see this type of display frequently, and SitePoint has one too (example from

In this case, the current page is “CD External Drives,” and the links to the left represent the hierarchy I drilled down through to get there. Clicking one of those links will take me back up the chain so I can drill down to another choice if desired. On some sites, this would mirror a decision tree which formed the basis of a multilevel dropdown or flyout menu arrangement.

What is this type of feature callled, and how can it be implemented using CSS only, no JavaScript? A link to a good tutorial would be helpful. Thanks!

Sounds like that could be a useful sticky in the web design forum.:slight_smile:

As Stevie D said you would usually add the html to each of the pages as you produced them and add the required level. Usually it’s no hardship because you have to create each page anyway (unless its a dynamic page and then you would need to script the trail).

The css/html aspect is quite straight forward though and you can find a nice little article here.

It’s called a “breadcrumb trail”.

It’s part of the HTML contents, so no, it can’t be implemented using only CSS or Javascript. If your pages are hard-coded then you need to manually code that feature in every page. If your site runs off a database then you can usually automate the procedure.

It might be nice to add to the SitePoint reference a dictionary or diagram showing the names used for stuff on web pages. I had to look up what “growl” was and that’s rather difficult to do on google if you have bad google-fu.

Cool! I wonder what else I missed out on by never reading Hansel and Gretel? :eek:

Thanks for your inputs, others welcome.