Learn Secondary Navigation

Learn how to use breadcrumbs in your UI design.

Start[missing "en.views.course_landing_page.learn-navigation-design.course_illustration" translation]
Learn Secondary Navigation
Lesson 1 of 1
  1. 1

    Consider the website to the right. We can see that the site is listing hotels in Singapore. Do you know if this site offers anything other categories of travel products (tours, flights, experiences...

  2. 2

    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...

  3. 3

    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 [...] . With this value, a click on the link will cause the page...

  4. 4
    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.  
    
  5. 5

    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 ...

  6. 6

    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 respe...

  7. 7

    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...

  8. 8

    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...

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

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

Pro Logo

Learn Secondary Navigation

Start[missing "en.views.course_landing_page.learn-navigation-design.course_illustration" translation]