Learn how to use breadcrumbs in your UI design.

Learn Secondary Navigation

Sometimes it is not appropriate to use breadcrumbs as a means of secondary navigation within a website. Users expect breadcrumbs to behave a certain way and attempts to deviate from this may confuse them. Most users are expecting breadcrumbs to expose the hierarchy of the site or display attributes of the page they are on. Path based breadcrumbs are unique to a user's journey and are not commonly implemented. Only use this type of breadcrumbs if there is a compelling reason for it.While breadcrumbs are common, it is not the primary way users will navigate a site. Don't make the breadcrumbs the only navigation structure.In general, the rule of not adding anything extraneous to the design applies here. If the site only contains a few pages or if the pages in the breadcrumbs are already available through primary navigation, there is little reason to include breadcrumbs in the design.

Breadcrumb Pitfalls


In this lesson we covered the concept of using breadcrumbs as a secondary navigation method for a site:
* Use breadcrumbs to indicate where a user is and the extent of the site
* Breadcrumbs are implemented using unordered lists in HTML with custom CSS styling
* Three types of breadcrumbs exist:
  * **location** - based on hierarchical structure of site
 * **attribute** - based on attributes of current page or item
 * **path** - unique to a user's journey on the site
* Path-based breadcrumbs can be confusing, only use if needed
* Ensure breadcrumbs will add value before adding to a site



Summary

As you saw in the introduction, it is difficult to understand where you are on a website that lacks breadcrumb navigation. By adding it to a site, users can get a quick feel for where they are on a site.

It also hints at the breadth of the site. If a user sees something like "Fashion > Shoes" in the breadcrumb structure, they could reasonably expect the site contains other clothing items or accessories besides shoes.

Breadcrumbs are usually displayed as a horizontal list of pages and take up minimal space. Users expect to find them in the header, left-aligned, and below any primary navigation. Typically they are separated with a ">" or a "/" symbol.

Let's practice setting CSS rules to conform to the expectations for breadcrumb navigation. You will start with a plain looking list, but by the end you will have created a breadcrumb!

Simple Example of Breadcrumbs





This provides a basic breadcrumb structure that will display like the image below:
<img src="https://content.codecademy.com/courses/ui-breadcrumbs/simpleBreadcrumb.png"/>

In the exercises, you will replicate this behavior for our travel website.



Where am I?

In the previous examples, if you clicked on any of the breadcrumbs, it wouldn't take you to a new page. This is because we have set `href="#"`. With this value, a click on the link will cause the page to scroll to the top of the current page.

In a full site, these breadcrumbs would link to their respective pages. This is accomplished by setting the `href` property to the appropriate page.

Since breadcrumbs are typically relative to the current page, the breadcrumb list on each page needs to be different. However, as a user moves around the breadcrumb list, they should expect the breadcrumb style and list to stay consistent.

For example, if the breadcrumb list was:

`Fashion > Shoes > Flats > Brown`

and a user clicked on "Flats", the breadcrumb list on that page should look like:

`Fashion > Shoes > Flats`

It would be confusing for a user if the categories or order of them changed like:

`Shoes > Shopping > Flats`

Where do Breadcrumbs Lead


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 previous shoe shopping example, 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 previous example, 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`



Breadcrumb Types


The previous exercise demonstrated the most basic styling for breadcrumbs. When designing your own site, you'll need to make a judgment call if this approach is sufficient. 
If you want to invite the user to interact with the breadcrumbs, you can style them to make them a more prominent part of the page design.

The example below makes use of a couple of CSS tricks to create an arrow effect. We're using the `::before` and `::after` pseudo-elements to add filled rectangles (with empty content) before and after each list item:
```css
.breadcrumb li a::before, .breadcrumb li a::after {
  content: "";
  position: absolute;
  border-color: darkcyan;
  border-style: solid;
  border-width: 15px 5px;
}
```

By setting a portion of the border to transparent, it creates the "tail" of the arrow:
```css
.breadcrumb li a::before {
  left: -10px;
  border-left-color: transparent;
}
```

This effect works because the element borders are drawn from the center of the element. We use similar CSS to draw the head of the arrow.

We'll walk through the individual steps in the exercises so you can see how each step affects the resulting look.



Breadcrumb Styles

Consider the website to the right. We can see that the site is listing hotels in Singapore. Do you know if this site offers any other categories of travel products (tours, flights, experiences) or products in other regions? There is no way to tell from the current view.

##### What is primary vs secondary navigation?
* The primary navigation system typically contains the most important links and buttons that need to be displayed on every single page of the site.
* Secondary navigation, or breadcrumb navigation,  usually consists of a clickable list of pages or attributes that led to the current page. It can help users understand the extent of the site and also where they are currently.

 For example, a shopping site may have a breadcrumb trail leading to a pair of shoes like so:
<img src="https://content.codecademy.com/courses/ui-breadcrumbs/UI_breadcrumb.svg"/>

##### Why do we call them breadcrumbs? 
Think about the story of Hansel and Gretel, where the kids drop breadcrumbs as they walked in the woods so that they would be able to find their way back.

##### Benefit of using breadcrumbs
Breadcrumb navigation provides a lot of benefits for users that come to random pages in a website through direct links or search results. Even if they enter to a seemingly random page on our site, they already have an idea of where they are in the website. The breadcrumb also hints at the extent of the site. For the example above, users could safely assume the site had shoes for other categories, shoes in different styles, and shoes in more colors.

Breadcrumbs also provide a way for a user to quickly jump backward in their navigation of the site. For example, if a user wanted to browse another style of shoe, they could click directly on the "Shoes" page and navigate to their desired style. Without the breadcrumbs, they would likely need to click "back" twice in their browser or start their search over from the home page. 

The decision to use breadcrumbs is a judgment call depending on the type, depth, and complexity of your site. In this lesson, we'll discuss some of the benefits of including breadcrumb navigation, how to implement it using HTML and CSS, and some of the pitfalls to avoid.

