20120412

Breadcrumbs with Zend_Navigation

I needed to create a breadcrumb into an application im developing, and i thought that would be cool to do it with Zend Framework and not just reinvent the wheel.

There is Breadcrumb helper that we can use, its very easy to setup, so here we go:

Setup navigation.xml

First we need to create an xml with our navigation map. In this case i want to recreate something like this:
  • Home - uri: /
    • Search - uri: /search
    • Management - uri: /management
      • Parameters - uri: /management/parameters
        • Parameter Detail - uri: /management/parameters/view/XYZ
The idea is to create a breadcrumb like this:
[ Home ]
[ Home / Search ]
[ Home / Management ]
[ Home / Management  / Detail ]

So i will create a /application/configs/navigation.xml as follows:

<?xml version="1.0" encoding="UTF-8"?>
<configdata>
<nav>
<home>
<label>Home</label>
<uri>/</uri>
<pages>
<database>
<label>Search</label>
<uri>/search</uri>
</database>
<management>
<label>Management</label>
<uri>/management</uri>
<pages>
<parameters>
<label>Parameters</label>
<uri>/management/parameters</uri>
<pages>
<details>
<label>Details</label>
<uri>/management/parameters/view</uri>
</details>
</pages>
</parameters>
</pages>
</management>
</pages>
</home>
</nav>
</configdata>
view raw navigation.xml hosted with ❤ by GitHub
As you can see it represents the navigation map i want in the breadcrumb. Each uri specifies an option in our navigation map.

Bootstrap

You have to bootstrap the navigation, here is the init method for your Boostrap.php :
<?php
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
protected function _initNavigation()
{
$this->bootstrap('layout');
$layout = $this->getResource('layout');
$view = $layout->getView();
$config = new Zend_Config_Xml(APPLICATION_PATH .
'/configs/navigation.xml',
'nav');
$navigation = new Zend_Navigation($config);
$view->navigation($navigation);
}
}
?>
view raw Bootstrap.php hosted with ❤ by GitHub
Check on line 12 the 'nav' parameter, its the first element that correspond to the configuration section we want to use.

Add it to your layout

After setting up our navigation, we need to add the breadcrumb to our layout template. My layout file looks like this:

...
<section id="breadcrumbs">
<ul class="breadcrumb">
<?=
$this->navigation()
->breadcrumbs()
->setMinDepth(0)
->setLinkLast(false)
->setSeparator(" / ");
?>
</ul>
</section>
....
view raw gistfile1.aw hosted with ❤ by GitHub


This is the basic configuration im using:

  • setMinDepth(0) gets and sets the minimum depth a page must have to be included by the helper. Setting NULL means no minimum depth.
  • setLinkLast(false) I don't want a link in the last option of the breadcrumb.
  • setSeparator(" / ") sets text with which to separate aggregated content.

Select the options in our controllers

Finally we need to tell Zend_Navigation where we are so it can show the right breadcrumb options.
To activate the breadcrumb on every action of a controller we need to get the uri and then pass it to the navigation object:
<?php
class ManagementController extends Zend_Controller_Action
{
public function init()
{
//where are we?
$uri = $this->getRequest()->getPathInfo();
//activate the navigation option
$activeNav = $this->view->navigation()->findByUri($uri);
//show nav
$activeNav->active = true;
}
}
view raw gistfile1.aw hosted with ❤ by GitHub

If we are in some weird uri and want to show /search in the breadcrumb you just have to use the uri parameter to search the right option.

This is the final result (using Twitter Bootstrap styling):

Hope it helps.

No hay comentarios.:

Publicar un comentario