Where do Breadcrumbs Lead

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

Instructions

1.The code on the right has a simple breadcrumb structure implemented. However, these breadcrumbs don’t link anywhere.

Within brownshoes.html, update the href property for the breadcrumb links so they link to the correct pages. Our other pages are within the same directory as brownshoes.html so you won’t need to add any additional path:

• shoes -> shoes.html

• flats -> flats.html

• brown -> leave this as '#' since we are already on that page

2. Using the breadcrumbs we can now navigate to the generic flats and shoes pages.

Now these pages need an appropriate breadcrumb list.

Add breadcrumbs to flats.html with links to the appropriate pages.

3. Add breadcrumbs to shoes.html with links to the appropriate pages. Since “shoes” is the starting breadcrumb, this page will only have one breadcrumb that links to this page ('#').

This single breadcrumb may not look useful, but users expect the site to stay consistent.