How to Convert Breadcrumbs to a Path

Access a Web page's design code to convert breadcrumbs to a path.

Websites use breadcrumbs, also known as breadcrumb trails, as secondary navigation schemes that show the position of the current Web page in relation to the other pages and sections on the website. Breadcrumb trails can be useful on large websites with numerous pages in multiple sections. Each navigation item in the breadcrumb trail displays the title of the corresponding Web page or website section, and clicking on the breadcrumb link opens the relevant page in the user’s browser. You can convert breadcrumbs into a path by viewing the HTML source code for the website in your Web browser.

Instructions

1. Launch your Web browser. Go to the website with the breadcrumb trail navigation scheme that you want to convert into a path.

2. Navigate to the page on the website at the end of the breadcrumb trail for which you want the path. You may need to use the primary navigation menu at the top or the side of each website page initially, and then drill down deeper into the website by using the secondary breadcrumbs navigation.

3. Right-click anywhere on the Web page that contains the breadcrumb trail. Select “View Source” or “View Page Source” from the browser's context menu. The Web browser displays the HTML source code of the page in a new tab or browser window.

4. Scroll to the position of the breadcrumbs in the HTML code. The item may be labeled with the “<!-- Breadcrumbs -->” identifier above the relevant code.

5. View the breadcrumb navigation code. The code will include the HTML file names for each page in the path. The code should look similar to this example:

   <div class=" breadcrumbs">
   <ul>
   <li><a href="index.html">Home</a></li>
   <li><a href="example1.html">First Section Title</a></li>
   <li><a href="example2.html">Second Section Title</a></li>
   <li><a href="example3.html">Third Section Title</a></li>
   <li><a href="example4.html">Page Title</a></li>
   <li><a href="example5.html">Page Title</a></li>
   <li><a href="example6.html">Page Title</a></li>
   </ul>
   </div>

   The code shows the actual HTML path for the breadcrumb trail navigation. The first “Home” item represents the first step on the path, and the final item in the list represents the currently open Web page at the end of the path.

Tips & Warnings

• Copy the HTML code for the breadcrumbs path into a plain text document, word processing document or HTML document and save the file to keep the breadcrumbs path information for future reference or use.

References

• Web Design Practices: Breadcrumb Navigation

Resources

• Smashing Magazine: Breadcrumbs In Web Design: Examples And Best Practices