Referring to the popular folk tale recorded by the Brothers Grimm, “breadcrumb” navigation is a textual “trail” used on websites to show how the user got to a particular page, providing a series of links back to where they started. It is usually utilized in hierarchical sites with a fairly deep, complex structure.

As a general rule, simple sites with fewer than a dozen pages should be “flat”, with all pages in the same location, to allow easy maintenance. If a site grows past 12 static pages, it is usually easiest to organize them into folders. For example, a products directory might contain several folders representing different categories, with individual products in each. Part of the directory structure for the website of the fictional company Bandersnatch Cutlery might look like what you see to above.

The index.php page inside each folder would display an overview of the products, swords, knives, etc. Index pages in folders work exactly the same as the index page at the root of the site, in the sense that they become the default page that comes up when using a URL that does not feature a specific file name. For example, using www.bandersnatch-cutlery.com/products/swords as the URL in a browser would automatically take us to the index.php page in the swords directory.

Hand-crafting this navigation for each page would be a rather stressful enterprise. Instead, let’s try to generate the breadcrumb components automatically using PHP.

First, let’s consider the markup and CSS involved. The fact that our website uses nested folders to contain information suggests that our navigation should consist of nested lists. If we were to write the HTML for the appropriate structure for the Vorpal Blade page, it would look like this:

1. <div id=”nav”>
2. <ul>
3. <li><a href=”/”>Bandersnatch Cutlery</a>
4. <ul>
5. <li><a href=”/products”>Products</a>
6. <ul>
7. <li><a href=”../”>Swords</a>
8. <ul><li><a href="#">Vorpal Blade</a></li></ul>
9. </li>
10. </ul>
11. </li>
12. </ul>
13. </li>
14. </ul>
15. </div>

(We are placing the nested lists inside a <div> as we will need to control all of the <ul>’s simultaneously).

Note that the link to the swords directory uses the standard ../ path navigation structure to indicate “go up one level”. (In this case, we do not need to indicate the page to go to, as index.php will be chosen automatically). Finally, the / path symbol is used to say “go to the root of the site” for both the index page at the root of the site and the products directory (again, we don’t have to specify the page for either, as index.php is the default).

Displayed without any CSS to modify its appearance, the nested list navigational structure will look like this in a browser:

Let’s use CSS to tidy it up:

1. div#nav { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
2. border-bottom: 1px solid #000; padding-bottom: .5em; }
3. div#nav ul { margin-left: 0; padding-left: 0; display: inline; }
4. div#nav ul li { margin-left: 0; padding-left: 1em; list-style: none;
5. display: inline; }
6. div#nav ul li a { text-decoration: none; color: #333; }

We will also use some pseudo-element selectors to generate separators between the list items:

1. div#nav ul li a:before { content: "\00BB"; color: #000; font-size: larger; }

Then we can use some of the PHP we learned earlier, together with the dirname() function, to create self-made pages to fill in the parts of the navigation that will be dynamic:

1. <?php $page = $_SERVER['PHP_SELF'];
2. $currentpage = ucwords(str_replace("-"," ",(basename($page,".php"))));
3. $currentdir = ucwords(basename(dirname($page)));
4. $topdir = basename(dirname(dirname($page))); ?>
5. <div id=nav">
6. <ul>
7. <li><a href="/" id=home">Bandersnatch Cutlery</a>
8. <ul><li><a href="/<?php echo $topdir; ?>">
9. <?php echo ucwords($topdir); ?></a>
10. <ul><li><a href="../"><?php echo $currentdir; ?></a>
11. <ul><li><a href="#"><?php echo $currentpage; ?></a></li>
12. </ul>
13. </li>
14. </ul>
15. </li>
16. </ul>
17. </li>
18. </ul>
19. </div>

This could be used on any page in the products directory to generate automatic breadcrumb navigation. Indeed, it could be used on any page in any directory on our site, so long as the file was three folders deep (as vorpal-blade.php is). Possible improvements to the script would include making it more generic: making the script work out just how deep the page was in our site structure and echoing out the path iteratively… but that will have to wait for another lesson.