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).
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.