Dynamic Bread Crumbs

Posted on June 24, 2007 in Tutorial | 2 Comments »

For a redesign project at work, the new design called for bread crumbs. In my opinion, bread crumbs are a great thing to add to a site, and others agree. I didn’t want to have to specify anything on each page for the bread crumbs to work, so I wanted to do it all dynamically.

For the project at work, I did it in ColdFusion; but on my own, I did it in PHP. I figured the way that I would have to do it would be to parse the URL to see which folders I was in.

The Code

File: breadcrumbs.php

<?php require('buildbreadcrumbs.php'); ?>

<ol id="breadCrumbs">
	<li class="first"><a href="/">Home</a></li>
<?php
	$breadCrumbs = $_SERVER['REQUEST_URI'];
	if($breadCrumbs != '') {
		$crumbUrl = '/';
		$toks = split('/', $breadCrumbs);
		for($i = 1; $i < count($toks) - 1; $i++) {
			$crumbUrl .= $toks[$i] . '/';
			if($breadCrumbMapping[$toks[$i]] != NULL) {
				echo '<li><a href="'.$crumbUrl.'">'.$breadCrumbMapping[$toks[$i]].'</a></li>';
			} else {
				echo '<li><a href="'.$crumbUrl.'">'.$toks[$i].'</a></li>';
			}
		}
		echo '<li class="last">'.$pageTitle.'</li>';
	}
?>
</ol>

The Explanation

The first thing that I do, is include the file buildbreadcrumbs.php (I’ll get to that later). Then the idea is that we will determine what folders we are in, based on the URL. We split the URL based on the slashes and step through them to make links.

Now, back to the File: buildbreadcrumbs.php

<?php
$breadCrumbMapping = Array();

/*Folders to be mapped*/
$breadCrumbMapping['f1'] = "Folder 1";
$breadCrumbMapping['f2'] = "Folder 2";
$breadCrumbMapping['f3'] = "Folder 3";
?>

This file is building as associative array to display different text than the folder name. There are some situations where the folders are not too pretty, so basically you just add the folder name (f1, f2, f3) to the associative array and assign it a “pretty” name (Folder 1, Folder 2, Folder 3). If you don’t assign a pretty name to a folder, it will just display the folder name instead.

I made an example page to see the bread crumbs in action.

You can download the scripts here:

Share This:
  • NewsVine
  • Technorati
  • Reddit
  • Google
  • StumbleUpon
  • Facebook
  • Digg
  • del.icio.us
  • Ma.gnolia
  • TwitThis

2 Responses

  1. HarrisSeptember 24, 2008 at 1:34 pm

    Is there any way to have breadcrumbs but omit the current post?

  2. TrevorSeptember 26, 2008 at 1:24 pm

    @Harris-
    Sure, just change this line:

    for($i = 1; $i < count($toks) - 1; $i++) {

    to this

    for($i = 1; $i < count($toks) - 2; $i++) {

Speak Your Mind

* Denotes Required Field

  1. Sick of filling out this form? Register or Log in now.

Who Am I?

Trevor Davis I’m Trevor Davis, a 24 year old Front-End Developer. Basically, I make web sites.

By day, I work for Matrix Group International in Alexandria, VA, and by night, I freelance.

Feel free to get in touch with me about anything.

What Have I Done?

  • Change We Can Believe In
  • Change We Can Believe In
  • Change We Can Believe In
  • Change We Can Believe In
  • Change We Can Believe In
  • Change We Can Believe In
  • Change We Can Believe In
  • Change We Can Believe In

View All My Work »

Bookmarks

  • Google Search Engine Optimization Starter Guide [PDF]

    Google has released a free 22-page Search Engine Optimization Starter Guide containing plenty of well-written, practical and straightforward advice for webmasters. If you've been looking into SEO for a while it probably won't contain anything new for you, but it's useful as a set of guidelines as to what Google considers to be good optimization practice. (psst, Google, with just a little design work it could have looked so much nicer!)

  • The importance of setting expectations

    To make your customer's experience better, be sure to set their expectations.

  • XML Sitemaps Generator

    Insert your URL and let it generate the XML sitemap for you. Very useful for static websites.

  • Train-ee ExpressionEngine Training

    Learn ExpressionEngine with books, screencasts, classroom training and free tutorials from Train-ee.com

  • web.without.words

    Weekly gallery of popular websites reconstructed by removing all words and images, replacing them with blocks.

View All My Bookmarks »