You are here: Home > Patterns repository > Navigation > Homeward path

Homeward path

Print versionEdit this page
Also known as: Breadcrumb, Trail marker.
Yahoo-breadcrumb.png Yahoo offers a double path. The upper path functions as page title and repeats the last 2 items from the page path. -- http://www.yahoo.com (Jul 2003)

Problem

Sites can have many levels of information, making it difficult for visitors to orientate, especially when they are coming from a deep link or search engine.

Motivation

The site's main navigation does not always show how a page is related to other pages. A site can have multiple navigation schemes, or a two-level tab navigation that hides the actual complexity of the site.

When the user performs a search, he does not use the main navigation but jumps directly to a page, so he can loose sense of location easily.

On websites with 3 levels or more, users need a fallback navigation method if other navigation methods (menu, search) fail.

Solution

Create a row of links that shows the hierarchical path from the homepage to the current page.

Diagram

You are here: Home > Level 1 > Level 2 > Level 3 > Current page

Use when

On all sites with 3 levels or more.

Implementation

Discussion

Examples

Amazon-breadcrumb.png Amazon uses a local path. -- http://amazon.com (Jul 2003)

AnneFrank-breadcrumb.png Textual cues in the path. -- http://www.annefrank.nl/werkstukwijzer (Jul 2003, design by Lost Boys, Mar 2003)

Apple-breadcrumbs-at-botto.png Homeward path at the bottom of the page, near the search box. -- http://www.apple.com (Jul 2003)

Nokia-breadcrumb.png Local path in product section. -- http://www.nokia.com (Jul 2003)

Noord-breadcrumb.png Confusing Homeward path: looks like main navigation. -- http://www.noord.amsterdam.nl (Jul 2003)


Connections

to write...

Literature


Authors:
-- ArthurClemens - 15 Aug 2003