Breadcrumb Navigation
Published: Monday, August 9, 2004
About breadcrumb navigation
The term "breadcrumb" comes from the fairy tale of Hansel and Gretel, where they leave pieces of bread while going through the woods, so that they can return back following the trail of breadcrumbs. The same technique is used in website navigation, where a trail of links are displayed to the user to tell exactly where that web page is located on the website. An example of a breadcrumb trail is shown on the top of this article page.
A breadcrumb trail provides a quick way for the user to know what section or branch this web page is in. A breadcrumb is useful if the website has a lot of categories and each category is a few level deep. A good example will be a directory such as Yahoo or DMOZ.
Implementing a breadcrumb navigation on website
Creating a breadcrumb navigation for a website can be a daunting task if not planned properly. Once the categories of the website start to grow and alter, the breadcrumb can become outdated if not automated. Some of the techniques are discussed below.- Hardcoding the links:
This technique of hardcoding the links on a static HTML page works for small websites. However, if the website contains huge number of pages with many categories, this method is not recommended.
- Using server side includes:
Centralize the breadcrumb navigation on a separate file for each category. If the site uses dynamic scripting language such as PHP or ASP, a single breadcrumb file can be used as shown in the next technique. Using server side include code, add that navigation file to each page that belongs to the category. This will reduce maintenance worries if the navigatio menu is changed or updated. Only one navigation file has to be updated instead of each of the web pages.
- Parameterize using scripts for dynamic sites:
If you have a dynamic site, you can add parameters in each article file to generate the breadcrumb trail on the fly. These parameters will be used by the breadcrumb include file to create the breadcrumb. This technique will use only one breadcrumb include file instead of separate category specific include files. As an example, if using ASP, the parameters in the file, which contains the article, are shown below. Here the variables home_loc, category_loc and article_loc are the URLs for the homepage, category page and article directory.
bcURL = article_loc + "my_article_name.htm"
bcText = "My Article Display Name"
In the breadcrumb include file, the VBScript code is similar to the one shown below.
<a href="<%=home_loc%>">Home</a> > <a href="<%=category_loc%>">Category Name</a> <% if (bcText <> "") then %> > <% if (bcURL <> "") then %> <a href="<%=bcURL%>"><%=bcText%></a> <% else %> <%=bcText%> <% end if %> <% end if %>
- Database driven websites:
For database driven websites, where the articles and webpages are stored in category indexes, the breadcrumb navigation can be implemented in a very similar method as shown above. However, using a database to render a category provides a lot more flexiblility. The categories of articles or products can be dynamically read from the database and rendered on the server side included breadcrumb file. The article or product categories can be changed, without altering any code for the webpages. Only the category data in the database is altered, and a new breadcrumb trail shows up for the article reflecting the new category.
|
