How do I implement bread-crumb navigation similar to Facebook?

Question

I'm trying to make an Ajax Web Application that uses bread-crumbing to allow the use of the Back and Forward Buttons, but still have that slick ajax page movement.

An excellent example is Facebook's image gallery.

When you click 'Next' the URL changes to the respective URL but the entire page does not update. It's a really smooth interface and I'd like to mimic that.

Anyone got a tutorial/write up on how this works?

Thanks.

Answer 1

Facebook uses the URL-Anchor-Identifier to store the code needed for their AJAX code. This allows changing the URL without having the website reloaded.

Example: http://somedomain.com/#ajax_data_here

Now it's to you to write a smart format for your ajax data and to parse that data.

---

Update Dec 2012:

I've recently encountered the following method for changing the path within the URL without reloading. Although it only works with newer browsers, I thought I'd append it:

• Modify the URL without reloading the page

Answer 2

As far as I am aware there are two main ways that this effect is achieved:

1. Using the anchor portion of the url (#gallery)
2. Using a hidden iframe

There are pre-built solutions that you can use to leverage this kind of functionality without having to deal with writing the code. For example if you are working with asp.net then you can use the Ajax History Control:

• http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-history-control

Answer 3

If you are using JQuery, look at the Address plugin.

http://www.asual.com/jquery/address/

Answer 4

If you're using jQuery, there are lots of suggestions documented here: https://stackoverflow.com/questions/116446/what-is-the-best-back-button-jquery-plugin

I've personally used jQuery Address, and it's super easy and very effective.