A breadcrumb is a useful and common widget in modern graphical user interfaces. This navigation widget gives users a way to keep track of their location. Breadcrumbs provide a simple mechanism to navigate from the current page to its parents using different links. Typically, graphical elements are used to separate elements inside the breadcrumb. Arrows are one of these common elements. In this recipe, you’ll learn how to build a breadcrumb widget for the iPhone applications using the iWebKit framework.
Getting ready
For this recipe, we are going to use the iWebKit as it offers a simple way for building breadcrumbs.
How to do it
Once again, we’re going to use our base file for the iWebKit framework created as seen in the first recipe of this topic. Edit this file and add the following lines below the div element with id equal to title:
Let’s see our new page on the iPhone Simulator. The result on the screen will be similar to the following screenshot:
How it works
As mentioned in the recipe about how to create a back button, we used the same leftnav class. The difference in this new recipe is the use of more than one link. Using different HTML links inside the leftnavdiv element, we can build a simple breadcrumb widget. Also, it is possible to get a breadcrumb on the right side of the toolbar; you should simply change the leftnav value to rightnav. Take a look at the next screenshot to see this breadcrumb located on the right of the main toolbar.
A more complicated case is when you need a back button with a breadcrumb in the same toolbar. This is not very usual, but it can be useful for some applications. To solve this issue, you can add a left and right navigation in the toolbar using the CSS classes provided for the iWebKit framework. The following code shows how to do it:
After reloading your page, you’ll see a screenshot similar to the following:
Don’t forget to change the # symbol for the complete name of the referenced HTML page. Keep in mind that the purpose of the back button and the breadcrumb is to offer a navigation tool for the user.
If you’re wondering whether it is possible to use an image for the breadcrumb elements, the answer is yes. The process is straightforward; simply add an HTML img tag inside each link.
See also
► Installing the iWebKit framework recipe in topic 1, Frameworks Make Life Easier
► Creating a toolbar recipe
