Search site
Tutorial - Breadcrumb navigation in PHP
OK, this is quite an old requirement now: The ability to see the 'context' of the page you're currently on. That is, if you visit a site's homepage, then click around a bit, it's really useful to be able to click back to previous pages in your click trail. If you've ever used Amazon's site and clicked around a bit, you'll see a variety of different types of breadcrumb trails in action. This code is LGPL, so you can use it in your own projects.
Requirements
So, this tutorial meets quite a basic requirement, and aims to achieve it with simple code. The code you see here is designed to be integrated into a web content management system with little effort, and indeed, this is how it's used on this site. The idea is that you need to supply very little or no information to the class in order for a fully functioning click trail to appear.
The output is semantically correct HTML, and is designed to be altered in appearance with CSS. You'll find no tables on this site where they're inappropriate!
Outline of the code
The code uses a constructor method, an 'add' method and a display method.
The constructor simply loads in existing data from a session cookie:
if ($_SESSION['breadcrumb'] != null){
$this->crumbs = $_SESSION['breadcrumb'];
}Then, the core of the work is performed by the add method:
function add($label, $url, $level){
$crumb = array();
$crumb['label'] = $label;
$crumb['url'] = $url;
if ($crumb['label'] != null && $crumb['url'] != null && isset($level)){
while(count($this->crumbs) > $level){
array_pop($this->crumbs); //prune until we reach the $level we've allocated to this page
}
if (!isset($this->crumbs[0]) && $level > 0){ //If there's no session data yet, assume a homepage link
$this->crumbs[0]['url'] = "/index.php";
$this->crumbs[0]['label'] = "Home";
}
$this->crumbs[$level] = $crumb;
}
$_SESSION['breadcrumb'] = $this->crumbs; //Persist the data
$this->crumbs[$level]['url'] = null; //Ditch the underlying url for the current page.
}Here's what happens: Each navigation element is stored in an array called $crumb. So, the navigation contains several 'crumbs'. Existing crumbs were loaded in the constructor. Every crumb is assigned to a level in the navigation. So, level 0 is the link to the site's homepage, level 1 is the top level navigation, etc. The method looks at the crumb that's been added and checks to see if there are lower-level links already in the trail. If there are, it discards them, so that a trail can be created that goes directly back to the homepage. The function 'array_pop' does this.
Next, just to be sure that there's always something in the trail, the method assigns a homepage link if there isn't already a 'level 0' link.
Finally, the current crumb link is added at the specified level, the data is persisted via a session cookie, and the url of the current page is dropped so that while the user is on that page, there is no link to itself.
The display method very simply outputs a <ul> list of navigation links that can be displayed with a little CSS:
function output(){
echo "<div id='breadcrumb'><ul><li>Click trail: </li>";
foreach ($this->crumbs as $crumb){
if ($crumb['url'] != null){
echo "<li> > <a href='".$crumb['url']."' title='".$crumb['label']."'>".$crumb['label']."</a></li> ";
} else {
echo "<li> > ".$crumb['label']."</li> ";
}
}
echo "</ul></div>";
}Using the class
Using the class is simple. In your php page, start a session, include the breadcrumb class, create an instance and then call the add method to add the current page to the click trail. Finally, call the output method:
session_start();
include("./Breadcrumb.php");
$trail = new Breadcrumb();
$trail->add('Home', $_SERVER['PHP_SELF'], 0);
$trail->output();
