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

Related patterns

Navigation, global

Problem

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

Solution

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 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]