demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Breadcrumb example

Breadcrumb navigation with PHP

php / navigation

Estimated reading time: 4 minutes

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.

Typical complex site directory structureThe 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).

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

Let’s use CSS to tidy it up:

div#nav { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; border-bottom: 1px solid #000; padding-bottom: .5em; }
div#nav ul { margin-left: 0; padding-left: 0; display: inline; }
div#nav ul li { margin-left: 0; padding-left: 1em; list-style: none; }
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:

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:

<?php $page = $_SERVER['PHP_SELF'];
$currentpage = ucwords(str_replace("-"," ",(basename($page,".php"))));
$currentdir = ucwords(basename(dirname($page)));
$topdir = basename(dirname(dirname($page))); ?>
<div id=nav>
<ul>
<li><a href="/" id=home>Bandersnatch Cutlery</a>
<ul><li><a href="/<?php echo $topdir; ?>">
<?php echo ucwords($topdir); ?></a>
<ul><li><a href="../"><?php echo $currentdir; ?></a>
 <ul><li><a href="#"><?php echo $currentpage; ?></a></li>
 </ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.