Fork me on GitHub
Post Format
February 15, 2011

XML Driven Breadcrumb Navigation with jQuery: Smart Breadcrumb

What are breadcrumbs?

Breadcrumbs are simply hyperlinks that lead sequentially to the current page. Breadcrumbs are an effective part of user experience studies. They help user to navigate easily to any of the pages in the trail.

Your web site should be hosted on a web server either locally or over the internet for breadcrumbs to be generated, the plugin will not work if you access your web pages from local file system.


Benefit of using breadcrumb navigation

Breadcrumbs are really helpful for your website users to trackback directly to their desired location especially when your web site has a very deep navigation structure. Rather than going back using browser back button, user can simply click any hyperlink on the trail.

How to make breadcrumbs?

Creating breadcrumb navigation can be as simple as creating an unordered list containing links to pages of your website. There are two techniques used to create breadcrumb navigation.

  • Static (Hard coded)
  • Dynamic (Database/XML driven)

You can either create breadcrumb navigation on each page manually or use some dynamic approach. Hard coded breadcrumb is suitable for small/static web sites, but every time you add another page or new category you’ll have to manually make adjustment to your breadcrumb navigation. Dynamic approach solves all the maintenance problems; using dynamic approach, changes to your web site structure are automatically adopted in your breadcrumb navigation.

Smart Breadcrumb Plugin

Well, Smart Breadcrumb plugin follows the centralized dynamic approach and creates XML driven breadcrumb navigation with the help of jQuery. No HTML markups, no maintenance hassles, simply provide an XML file containing your site structure, reference necessary scripts and CSS files. And this is all Smart Breadcrumb requires to create breadcrumb navigation for your website.

Use of an XML file for breadcrumb navigation saves you to make redundant changes in your HTML markup. With Smart Breadcrumb you make changes in your XML and they are automatically reflected on your website.

Smart Breadcrumb Features
  • Based on an XML file
  • Supports custom CSS styles
  • Supports icons and custom separators
  • Search Engine Friendly
  • Dropdown menu

Let’s quickly do an example. Here is the sample XML file.

NOTE: One thing you need to make sure while creating your website structure XML file is the case sensitivity of your url paths. Your path should have exact case as your actual directories.e.g “products” should not be used for “Products”.

You can nest page nodes within page nodes to infinites level, see below the directory structure of above XML.

sample directory structure

We are now ready to let Smart Breadcrumb plugin to generate breadcrumbs automatically for us, simply link sbreadcrumb.css and sbreadcrumb.js to your pages, add a block element (div) and setup jQuery’s ready function like this.

<html>
<head>
    <title>Smart Breadcrumbs</title>

    

    

    

</head>
<body>

</body>
</html>

Smart Breadcrumb has five styles modes, to use a style you need to pass numeric equivalent of style e.g. ‘style:1’ for first style and ‘style:2’ for second style and so on. Smart Breadcrumb initialization function takes three parameters.

  • sitemapulr
  • style
  • separator

‘sitemapurl’ and ‘style’ parameters are mandatory while ‘separator’ parameter is optional. Style ‘1’ is the default style.

Change History
  • Feb 15, 2011: Published
  • Feb 17, 2011: Fix for Google Chrome
  • May 15, 2011: Fix for nested directories
View Demo

No related posts.

30 comments

  1. surrounding

    05/08/2011 @ 9:27 am

    I try the demo and put the source on the web server, but the breadcumbs do not work.
    Only the style 2 show the grey bar on the top of the box.
    How can I get the fine version to see how its work?

    Reply
  2. kaloj

    01/05/2011 @ 6:11 pm

    HI all! I’m trying to do the trick, but it seems the plugin it’s not reading the xml file too. I put all the files in the root of my page and assign an id to my breadcrumb div, it change the colors depending on the style I put but there is no text on it , I deduce that the problem is in the xml, can anyone help me ? here is my code:

    $(document).ready(function() {

    $(‘#breadcrumb’).sbreadcrumb({ style: 2, sitemapurl: ‘sitemap.xml’ });

    });

    Thank you all, I don’t know what I’m doing wrong, but plz help me I’m very interested on doing this to work. 2 days on it with no luck :_(

    Reply
  3. kunde

    30/04/2011 @ 3:24 am

    Lots of quite good reading here, thanks! I had been searching on yahoo when I discovered your publish, I’m going to add your feed to Google Reader, I look forward to a lot more from you.

    Reply
      • kaloj

        01/05/2011 @ 6:14 pm

        HI all! I’m trying to do the trick, but it seems the plugin it’s not reading the xml file too. I put all the files in the root of my page and assign an id to my breadcrumb div, it change the colors depending on the style I put but there is no text on it , I deduce that the problem is in the xml, can anyone help me ? here is my code:

        $(document).ready(function() {

        $(‘#breadcrumb’).sbreadcrumb({ style: 2, sitemapurl: ‘sitemap.xml’ });

        });

        Thank you all, I don’t know what I’m doing wrong, but plz help me I’m very interested on doing this to work. 2 days on it with no luck :_((

        Reply
          • kaloj

            02/05/2011 @ 7:58 am

            Yes I ‘ve all the reference ok , my files are all in the /v2/ of the site and I reference them with :
            $(document).ready(function() {
            $(‘#breadcrumb’).sbreadcrumb({ style: 1, sitemapurl: ‘/v2/sitemap.xml’ });
            });

            I ‘ve to say that the source zip with all the files downloaded from here it’s not working too, it reads the css but no displays any text, maybe there is some error, I don’t know but plz can u check it?

            Thx for all

          • kaloj

            02/05/2011 @ 9:41 am

            I’ve upped the source uncompressed zip to my server and it doesn’t works too, what I’m doing wrong?

            thank u

          • Muhammad Shahbaz Saleem

            02/05/2011 @ 9:55 am

            run it in firefox and check if you see any error in error console, as its working perfectly for me. I’ve downloaded the SmartBreadcrumb-demo.zip unzipped it and placed the contents of SmartBreadcrumb-demo into a virtual directory h-t-t-p://localhost/breadcrumb, its working nicely when i access h-t–t-p://localhost/breadcrumb/index.htm

          • kaloj

            02/05/2011 @ 10:31 am

            I’ve viewed that in your server demo you have an ASP server, My server is not ASP it’s an apache, maybe that’s the problem, only for asp? in firefox there is no errors, with my page. Can I send u a prv message with the link to my server?

            thanks!

  4. eric

    26/04/2011 @ 7:45 am

    How come i cant display the breadcrumbs’s things. This seem like not function to me $(document).ready(function() {
    $(‘#breadcrumb’).sbreadcrumb({ style: 1, sitemapurl: ‘../../sitemap.xml’ });
    });

    Any ssolution ? i am using jsp and i am new in jsp. Thanks!

    Reply

  8. Pingback: Tweets that mention XML Driven Breadcrumb Navigation with jQuery: Smart Breadcrumb « EGrappler -- Topsy.com

  11. Pingback: Smart Breadcrumbs- XML Driven Navigation with jQuery « Free Web Design Resources

  12. Pingback: Dynamic Breadcrumbs with XML and jQuery: Smart Breadcrumbs | Greepit

    • Muhammad Shahbaz Saleem

      29/03/2011 @ 6:46 am

      Reading xml file using jQuery is realy simple. You just need to pass the url in jquery’s get function and the callback function where you’ll received the xml source, here is how you can do this.

      $.get(‘path to your xml file’, function(xmlresponse){

      alert(xmlresponse’);

      });

      Reply

Leave a Reply

Required fields are marked *.

*