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:

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 :
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:



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:

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