But we are going to enhance this simple form and to create a breadcrumb that is similar to the one on apple.com.

Let’s create something that looks like this

As you can see on the screenshot above, breadcrumb has a soft gray gradient and a separator that looks like a right arrow. Those are the only two images that we are going to use: background gradient and a separator. The design we want to create looks like on the image below.

So what would be the best way to create a breadcrumb? Personally I think it’s the best to use unordered list (UL element). So we can have a HTML structure like this:

In the example above we have unordered list that has four list items. Each list item has a link that will point to a single page in the path, except for the last one. There is no need to point to a current page since user is already viewing it.

If you try to see this example in a browser you would see a simple bulleted list. So we have to use some CSS here to make things right.