...

Breadcrumbs

The breadcrumb appears at the top of every page -- except Home -- within the body area of the page, above the page title. Each page from Home to the page a user is on is included in the breadcrumb. All previous pages are hyperlinks. The current page is in the breadcrumb, and it is not hyperlinked.

Breadcrumbs appear in Source Sans 13 pt; hyperlinked items are underlined and Dark Orange (#BB6E24); non-hyperlinked items are in Dark Green (#615A36).

Code

...

<div id="breadcrumbs_view" style="overflow: hidden; ">
<div id="breadcrumbs_widget_view">
 <ul>
 <li id="home">
 <a href="#!home">HOME</a>
 </li>
 <li id="workset">
 <span>&nbsp;&gt;</span>
 <a href="#!workset"> <span></span>
 Aaronson, Scott workset
 </a>
 </li>
 <li id="costobject">
 <span>&nbsp;&gt;</span>
 <span><span></span>I2740309</span>
 </li>
 </ul>
</div>

</div>

Example

Image Added

Related patterns

Navigation, global

Problem

Users need a way to understand where they are in the hierarchy of information provided by the a site or system. In the case of RAFT, the As with other content-heavy sites, the content hierarchies of an MIT-BI site can have complex parent-child relationships can be quite complex. . When users land in the middle of an application from short cuts or saved favorites, they can easily lose their sense of place.

Solution

...

1. The breadcrumb appears at the top of every page--except Home--within the body area of the page, above the page title. Each page from Home to the page a user is on is included in the breadcrumb. All previous pages are hyperlinks. The current page is in the breadcrumb, and it is not hyperlinked.
2. Breadcrumbs appear in Source Sans 13 pt; hyperlinked items are underlined and Dark Orange (#BB6E24); non-hyperlinked items are in Dark Green (#615A36).

...

1. Hyperlinks

...

1. Users need a way to understand where they are in the hierarchy of information provided by the system. In the case of RAFT, the parent-child relationships can be quite complex. 

...

Breadcrumbs indicate to users where they are within the hierarchy. This is especially useful in cases where they have used the search or the favorites to access worksets or cost objects .
Rationale (other things we tried)
Accessibility

Breadcrumbs

via shortcuts. Breadcrumbs are the best possible solution to indicate to users where they are

...

in a site or application. We are following web best practices in our implementation of this navigational aid.

Rationale

[insert]

...