How do I Create a Breadcrumb Menu for a Website?

Breadcrumb navigation is a term used to visually remind the user of a website of the path that she has taken to arrive at her current location within the website. The term comes from the fairytale Hansel and Gretel where the children left breadcrumbs to find their way home again. In the same manner, a website user can see the path that she took to get to her current location and follow the breadcrumb navigation to return home again.


    • 1

      Define the major high-level categories for the menu. These are the same links you would use on a primary navigation. These high-level links should be able to cover the breadth of topics covered by the website. The major links for a photography portfolio may include "Home, Gallery, Portfolio, Contact, About."

    • 2

      Develop sub-level categories for the menu. Depending on the size of the website, you may only need one sub-category if the site is small, or many if the site is extensive. Using the example of the photography portfolio, the gallery high-level category may break down into "Stills, Nature, People, Food, Travel." These sub-categories might break down further into "Color" and "Black and White" galleries for each.

    • 3

      Determine where on the page that the breadcrumbs will be displayed. Most often, breadcrumbs are found near the top as a form of secondary navigation. On large websites that have a diverse variety of topics to cover, breadcrumbs are a necessary method for helping the user to get back to previous sections of the website.

    • 4

      Choose a separator method. Many websites that use breadcrumbs use the right arrow ">" symbol to indicate the path of travel through the breadcrumb list. For example "Home > Books > Computing > Programming" might be a breadcrumb trail used by a retail website. Other separator methods can range from using a variety of symbols, to images using rollovers and animations. If you are developing a vertical breadcrumb trail, tabbing is a popular form of separating. Whichever separator method you decide on, make sure that it is understandable to the user that the navigation is a breadcrumb trail and not a main form of navigation.

    • 5

      Choose a scripting method or service for developing the breadcrumbs. Some languages like ASP.NET have built in controls for creating breadcrumb menus and trails. There are Javascript tutorials for developing the scripts that create breadcrumbs (See Resources).

Related Searches



You May Also Like

  • How to Capture a Web Page Picture

    The next time you see a picture on the Internet that makes you smile, make a copy of it to keep for...

  • How to Add Breadcrumbs to Your Website

    Website breadcrumbs show the trail of pages leading to the page a visitor is currently on. They serve as a navigational aid...

  • HTML Breadcrumbs Tutorial

    Breadcrumbs are a useful secondary navigation system for creating HyperText Markup Language (HTML) web pages. These pieces of linked text provide a...

  • How to Make Breadcrumbs

    You can make breadcrumbs at home with ease! Just follow the steps below to upgrade your pantry using leftover bread and spices!

  • How to Make Panko Bread Crumbs

    Panko may sound exotic and unusual, but it's simply the Japanese version of breadcrumbs. However, their flakiness makes them crispier than standard...

  • How to Make a To-Do List

    Invest just a little time planning your day, and accomplish more things smoothly.

Related Ads

Check It Out

7 Tips for Photographing Your Kids on Halloween