There are three major types of breadcrumbs:
- Location
- Attribute
- Path
You’ve seen the first two types in our examples so far:
Location based breadcrumbs are based on where you are with respect to the navigation structure of the website. In our shoe shopping example above, the first three li
elements are location based. We are in the “shoes” section of the website, which is contained within the “fashion” section, which is contained within the “shopping” section.
Attribute based breadcrumbs are based on the attributes of the page or product that you are browsing. In our example above, the final two li
elements are attribute based. We are shopping for shoes that are “flats” and “brown”. Since the order of these attributes is not prescriptive, you’ll see some sites display these at the same level in the UI. If you want to allow users to remove attributes, provide an (x) button or similar to indicate they can be removed.
Finally, breadcrumbs can be based on a user’s unique path through the site. For example, if they landed on the home page, browsed to the about page and finally the registration page, their breadcrumb trail may look like:
Home > About > Register
Note that this breadcrumb trail will be different for each user and each visit. For even mildly complex sites, the number of steps will become large. To simplify the display, the beginning of the trail is often abbreviated:
... > About > Register
Instructions
In the pane to the right, we have the basic breadcrumbs structure for the travel website. We’ve added a couple of attribute based breadcrumbs.
Add an attribute
class to the li
elements that are attribute based and a location
class to the breadcrumbs that are location based.
Modify the CSS to only put the “>” character between location based breadcrumbs.
Color the “attribute” anchor tags gray to indicate that they are different than the “location” ones.
Add a “close” indication using the :after
pseudoselector:
.attribute a::after { content: " x"; font-size: 8px; vertical-align: super; }
Note that this functionality has not been implemented, we are focused on the display of the page only.