Breadcrumbs

Breadcrumbs, if they exist, appear at the top of the content column to help orient the user to where they are in the application. Breadcrumbs have "greater than" sign in between each link.

Sample
Implementation
Code
History

Classes

lotusBreadcrumbs - the class that goes on the outermost div.

Basic Implementation

Create a div and assign in the class lotusBreadcrumbs. Add the text "You are in:"

Each breadcrumb is a link that brings you to a page in the heirarchy, except for the last breadcrumb, which is the name of the current page.

Put a > character in between breadcrumbs, using the > entity.

Accessibility

Put the role="navigation" landmark on the lotusBreadcrumbs div. Add an aria-label="Breadcrumbs" to describe this navigation.

Examples

simple breadcrumbs

Sample HTML - Breadcrumbs

CSS (breadcrumbs.css)

This component began as a typical breadcrumb implementation.

The interactive breadcrumb divider was introduced later.

January 2011: deprecated the interactive breadcrumb divider.