Skip to main content link. Accesskey S

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. There are two types of breadcrumb separators. One is a plain "greater than" sign. The other is a triangle graphic that, when clicked, opens up a drop-down menu (not implemented in this prototype).

Directionality:

Breadcrumbs with active dividers

Classes

  • lotusBreadcrumbs
  • lotusDivider

Basic Implementation

Create a div and assign in the class lotusBreadcrumbs

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.

Variations

Use a class of lotusDivider on a link tag for an image in between breadcrumbs that when clicked shows a drop-down menu (see code samples), otherwise, just use > between breadcrumbs

Examples

Sample HTML - Simple Breadcrumbs

Sample HTML - Breadcrumbs With Active Dividers

CSS (breadcrumbs.css)

Theme CSS (breadcrumbsTheme.css)

This component began as a typical breadcrumb implementation.

The interactive breadcrumb divider was introduced later.

See Also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.