Skip to Content
Codecademy Logo
Learn Navigation Design
Learn
Learn Secondary Navigation
Breadcrumb Types

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

1.

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.

2.

Modify the CSS to only put the “>” character between location based breadcrumbs.

3.

Color the “attribute” anchor tags gray to indicate that they are different than the “location” ones.

4.

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.

Folder Icon

Sign up to start coding

Already have an account?