When a site is architected with a structure that is both deep and wide, we look to elements like secondary and tertiary navigation and/or traditional breadcrumbs to help a user navigate. They’ve been around a long time and are now considered “best practices” by convention.

We basically use this method because sometimes with 3 or more deep levels, it becomes difficult for user to get to know where are they in the site. So with the breadcrumb navigation it become easy to go back to the previous level and choose a different option.

In this process, the navigation bar adds each page labels(normally related to the title of the page) from where the user going through and saperate it with greater than sign (>). Every label will be a link except the last one because it is the label of the current/selected page. This kind of navigation should be placed at the top of the page so that it will be easily visible and it we should not display a breadcrumb on the site’s topmost page(it generally starts from the second level page).
Now a day, many sites are using this kind of navigation bar along with google search engines.

Implementing a breadcrumb navigation
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.

1. If your sites have limited number of pages then you can have hardcoded breadcrumb navigation otherwise it would be very difficult.

2. The navigation should be done in  a different file so whenever you want to change the path, you have to change only one file and not all of them.

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

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

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

We were immediatly intrigued by how natural this navigation system felt. It just seemed to get out of the way and provide a high level of focus on the section we were in. No matter how deep we dove, we never felt lost nor abstracted from the top-most navigation tier.

For more references:

Latest posts by Sraddha Agrawal

  • Share/Bookmark