Crumbline Navigation

Crumbline navigation has been around for a long time. The first instance I can recall was when Hansel and Gretel used a Crumbline of pebbles to navigate their way out of the forest. It was only when they used bread crumbs instead of pebbles did they become lost.

Crumblines are a great way for uses to navigate through the UI especially if the UI contains wizards and or drill downs. It provides instant feedback to the user in relation to the depth and direction of their navigational choices.

Uses can then step back to the exact position they want by selecting the specific crumb at any given time.

This is an example I created in Flex 3 to illustrate the Crumbline Navigation in it's most simplistic form.



This component takes in a collection of Crumb Objects. The Crumbline then dispatches "crumbEvents" when a crumb item is selected, letting the view dictate how it handles the navigational change.

eg.

<components:Crumbline styleName="crumblineStyle" id="crumbLine" dataProvider="{acCrumbs}" crumbClick="onCrumbClick(event)" />

In this example I used a simple viewstack and bound this to the Crumbline using it's selectedIndex property.

<mx:Binding source="crumbLine.selectedIndex" destination="vsChoice.selectedIndex" />

A demo of this can be seen here

Special thanks to the Brothers Grimm for the Crumbline model.

Comments
timberland shoe company's Gravatar We are traveling by train. Out timberland hiking boots windows, we drink in the passing scene of cars on nearby highways, of children timberland shoe company waving at a crossing, of cattle grazing on a distant timberland boots hillside, of smoke pouring from a power plant, of row upon row of corn and wheat, of flatlands and timberland wheat shoes valleys, of mountains and rolling classic 3 eye timberland boat hillsides, of city skylines and village halls. But uppermost in our black timberland boots minds is the final destination.
# Posted By timberland shoe company | 8/28/10 1:12 AM
BlogCFC was created by Raymond Camden. This blog is running version 5.9.002. Contact Blog Owner