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:

<div id="nav">
	<ul>
		<li>
			<a href="/">Bandersnatch Cutlery</a>
			<ul>
				<li><
					a href="/products">Products</a>
						<ul>
							<li>
								<a href="../">Swords</a>
									<ul>
										<li>
											<a href="#">Vorpal Blade</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
</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).