Hey guys i started my Full-Stack Engineer course two weeks ago and currently i am learning Secondary Navigation (Breadcrumbs) and i am having problems in it. I am being confused in Location, Attribute and Path navigations. Can someone explain it to me? How they works and what is the difference between them? And how we implement them in our projects?
Hi there!
When asking for help with a course, it is best to share a link to the specific page you’re having trouble with so that whoever assists you can quickly ascertain what is being asked. However, I am familiar enough with the course to locate which task page you were referring to. 
How do these breadcrumbs work and what is the difference between them?
Path Breadcrumb
Definition from the lesson: "based on a user’s unique path through the site."The trail will be dynamic based on where the user goes throughout the site.
For each explanation, I’ll use Best Buy’s website as the example.
So, let’s say I am on Best Buy’s website. I go to appliances, washers & dryers, then decide to look at computers & tablets, and monitors. My breadcrumb trail will look like this:
Best Buy > Washers & Dryers > Computers & Tablets > Monitors
The trail is the exact path I took through the website.
Location Breadcrumb
Definition from the lesson: "based on where you are with respect to the navigation structure of the website."The trail will be static based on where the user goes throughout the site.
I am on Best Buy’s website again and will click on the same path as last time. Appliances, washers & dryers, computers & tablets, and monitors. What will my breadcrumb look like this time?
Best Buy > Computers & Tablets > Monitors
This time the trail is based purely on location and not the path I took to get where I ended.
Attribute Breadcrumbs
Definition from the lesson: "based on the attributes of the page or product that you are browsing."This breadcrumb list works similarly to location breadcrumbs but will include attributes such as filters in the trail created.
I’m back on Best Buy. This time we’re going computers & tablets, monitors, ultrawide monitors, and curved screen. My breadcrumb trail will look like this:
Best Buy > Computers & Tablets > Monitors > Ultrawide Monitors > Curved Screen
Now you might be thinking, this does look like it works exactly like the location breadcrumb; however, the location breadcrumb would not include the ultrawide monitors and curved screen filters in the trail. But I will also say that I cannot think of a single website that uses attribute breadcrumbs. Instead, you will see a location breadcrumb trail with a list of selected filters that appear on the user interface.
How to implement breadcrumbs in our projects?
Implementing breadcrumbs will depend on which breadcrumb you use or how you build your project. A pure HTML & CSS project will easily allow for the use of location breadcrumb because it is static. An example of this is shown on page 3/8 of the lesson.However, path breadcrumb is dynamic and attribute breadcrumb is semi-dynamic. They will require JavaScript to keep track of user location and history; something you will probably learn in later lessons.
I hope this helped clear any confusion! If you need further clarification, please feel free to ask.
Happy coding!
1 Like
Thank you so much for clarifying this👍
1 Like