Learn Secondary Navigation
Lesson 1 of 1
  1. 1
    Introduction
    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 …
    Start
  2. 2
    Simple Example of Breadcrumbs
    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…
    Start
  3. 3
    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 pag…
    Start
  4. 4
    Where am I?
    This provides a basic breadcrumb structure that will display like the image below: In the exercises, you will replicate this behavior for our travel website.
    Start
  5. 5
    Breadcrumb Styles
    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 …
    Start
  6. 6
    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…
    Start
  7. 7
    Breadcrumb Pitfalls
    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 confu…
    Start
  8. 8
    Summary
    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 i…
    Start

What you'll create

Portfolio projects that showcase your new skills

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory