ONCE UPON A time
a web designer wished to communicate a page’s location within the hierarchy of an entire site.
There was only a small space available at the top of the page.
The designer thought for a while, and eventually found the answer between the keys of his keyboard:breadcrumbs.
What are breadcrumbs?
Well, if you have ever browsed an online store or read posts in a forum, you have likely encountered breadcrumbs.
They provide an easy way to see where you are on a site. Sites like Craigslist use breadcrumbs to describe the user’s location.
Above the listings on each page is something that looks like this:
s.f. bayarea craigslist >
city of san francisco > bicycles
Translated to English, that says “I’m looking at bicycles for sale within the city limits of San Francisco, which is located in the San Francisco bay area.” Phrased another way, it says, “If I go to the Craigslist home page, click on the San Francisco location, and then choose bikes for sale, then, with a little luck, I’ll find these listings.”
As far as I can tell, the name “breadcrumb navigation” is derived from the children’s story of “Hansel and Gretel” by the Brothers Grimm:
“Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again.”
Smart Hansel! So, that’s the skinny on breadcrumbs. Now let’s look at how they can be used on your site to help your users find their way around.
CONTENTS
Breadcrumb structure
Make them dynamic
Alternate methods
Optional code
Breadcrumb structure
Breadcrumbs work best with sites that are naturally hierarchical. Most sites are organized into directories and sub-directories on the file server, so this navigation system should be easy to implement if your site follows this standard rule of structure.
Before we move on to the actual code, let’s make sure we’re on the same page about what I mean when I say “hierarchy”. Consider this homepage of a young girl I’ll call Gretel:
No comments:
Post a Comment