How to Create a Breadcrumb for a Website

As websites grow, navigating them becomes more difficult. One of the ways to make your website more usable is to provide a breadcrumb, which enables users to locate things on your site. A breadcrumb does not negate the need for a good search engine; it merely lets the user find things in a different way.

Instructions

1. Determine the major categories on your website. Most of the time, these will correspond to the contents of the other navigational interfaces of the site. Quite often, they are located at the top of the site within the banner, or on the left-hand navigation bar; or they can be on the footer. A typical example of a navigational structure would be: Home, Library, New Products, Branch Locations, Contacts.

2. Within each of the major categories, determine the name of each of the subcategories. For example, "Press Releases" would be contained within "Library." Therefore, for a press release, the breadcrumb would look like this: Home > Library > Press Releases > Name of press release.

3. Before you start putting the breadcrumb on each of your pages, determine on which section of your site a place each page belongs. Each of the pages on your website must be assigned a specific place within the hierarchical structure. For example, under "Branch Locations," you would most likely have the branch locations segregated by state. This is an example of what would appear on a page containing links to all of the branch locations within the state of New Mexico: Home > Branch Locations > New Mexico.

4. Assign each of the pages to a subcategory. In this case, you would have a city: "Albuquerque." Under the city, you would have each individual branch location. An example of the breadcrumb for a branch location would be: Home > Branch Locations > New Mexico > Albuquerque > 7th Street Branch.

5. Start writing the HTML for each of the breadcrumbs. Here is an example of the HTML for a branch manager named Evelyn Smith: <a href="">Home</a> > <a href="">Contacts</a> > <a href="">Branch Managers</a> > Evelyn Smith

Tips & Warnings

• Make sure your breadcrumb is consistent across the website, or you will confuse the user. A breadcrumb structure does not take the place of good webpage design. Make sure your category pages are well-designed. Not every site needs a breadcrumb. Only use a breadcrumb if your information is arranged hierarchically.

• There are times when a particular web page belongs in different categories. One example could be an article written about a new product. You may want the article to appear in both the New Products area and within the Library. If you want the breadcrumb to reflect how a person navigated to the page, you will need to implement JavaScript or an alternative type of technology.