Pre 4th of July dinner: ribs, chili, baked beans, watermelon....mmmm

Dynamic Bread Crumbs

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:
  • del.icio.us
  • Digg
  • Twitter
  • Facebook
  • StumbleUpon
  • Google Bookmarks
  • NewsVine
  • Technorati
  • Reddit
  • Design Float
  • LinkedIn

RSS feed of comments for this entry

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

  2. @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.
  2. To post code snippets, use <pre><code>YOUR CODE HERE</code></pre>
Me, Trevor Davis. My blue steel face…

Hi, I’m Trevor Davis

I’m a 25 year old Front-End Developer living in Alexandria, VA. I work full-time at Matrix Group International and freelance on the side.

I specialize in CSS, HTML, jQuery & WordPress. See more of my work, and then hire me.

Recent Work

  • Monica Davis
  • The National Christmas Tree
  • Matrix Group International
  • The MatriX Files
  • Wireless Career
  • George Washington Wired
  • Direct Selling 411
  • Makeup Bizz
  • InstallNET
  • National Park Foundation
  • Worldwide Breast Cancer
  • Food Marketing Institute
See More of My Work

Asides