Breadcrumbs Tutorial

Breadcrumbs

This tutorial will teach you how to add breadcrumbs to the top of your html page to help with navigation.

1. | (pipe)

2. > (arrow)

3. : (colon)

These are just a few of the more common breadcrumbs used in websites.

This tutorial will go through the separators in order and show you how to get that look!

1. The Pipe Separator "|"

On a mac you get this symbol by pressing "shift" and the "|" button located right below the delete button.

The code for the pipe separator looks like this:

Quick Explanation of the Code:

The name in quotations is the page that you want the link in your bread crumb to go to. The first words in quotes are the "home.html"

Next you add the word. Home. Home is the button you will click on that will take them back to the home page. Same goes for History and Production. The separators go between each set of page/name tags.

Make sure you put a space before and after each separator.

This is what your breadcrumbs should look like with the pipe separator!

2. Arrow Separators ">"

The same format goes for all of them just the actual symbol changes.

3. Colon Separators ":"

This is just a quick and simple way to get different looks for breadcrumbs on your website!