How to add breadcrumbs to your website

Written by steve aycock
  • Share
  • Tweet
  • Share
  • Email

Website breadcrumbs show the trail of pages leading to the page a visitor is currently on. They serve as a navigational aid and can give a visual point of reference to your website visitors. You can add breadcrumbs to your existing website by placing a small section of HTML code on each page showing the path followed from the home page to each page of your website.

Skill level:

Things you need

  • HTML editor or text editor

Show MoreHide


  1. 1

    List the navigation path to each page that will have breadcrumbs. Starting with the home page, move through your website and determine the path from the home page to each page. Keep your list of paths in a word-processor document or on paper.

  2. 2

    Write the HTML code for the navigation path. Using an HTML editor or a text editor, such as Notepad, create a hyperlink for each page in the breadcrumb trail with the HTML <a> tag. You can place a separator between the page links, such as a dash or an arrow. You should have a sequence that looks something like the following, but with your page file names, of course:

    <a href="http://www.index.html">Home</a> - <a href="http://www.page1.html">Page 1</a> -<a href="http://www.pageN.html">Page N</a>.

    This example code would show a breadcrumb trail of "Home - Page 1 - Page N."

  3. 3

    Insert the code into the page file. Open a website page file with the HTML editor and insert the HTML code for the breadcrumb trail that corresponds to the website page file you opened. Save the modified page file. Repeat the insertion process for each page file. Breadcrumbs are typically placed near the top of a website page, under the header.

  4. 4

    Upload the modified page files to your web host. You can use an FTP file-transfer utility to upload your modified page files. Some web-hosting services offer a web-based FTP utility that you can use instead of a separate FTP utility program.

  5. 5

    Test the breadcrumbs. Visit your website, navigate through each page, and verify that the proper breadcrumb trail is being displayed and that the hyperlinks for the breadcrumb trail are working.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.