Breadcrumbs

Hoewel de moderne browsers ze grotendeels overbodig maken (houdt de muis maar eens ingedrukt op de 'terugknop' dan verschijnt de hele browsegeschiedenis), zie je toch nog wel eens de zogenaamde breadcrumbs. Deze vormen het navigatiespoor dat uiteindelijk naar de huidige pagina heeft geleid en bestaan uit links naar de betreffende pagina. Dit kan nuttig zijn voor de gebruiker omdat het een goed overzicht geeft. Bij nadere beschouwing blijkt dat er verschillende soorten broodkruimelsporen bestaan. Een statisch broodkruimelspoor geeft alleen de hiëarchie zeg maar de boomstructuur van de site. Een script (in JavaScript) dat hierin voorziet vinden we in Het Complete Handbook HTML 3e editie blz.412. In dat geval wijzen de links naar het index-file van ieder map en zijn de map-namen de broodkruimels. In iedere map zijn meestal meerdere pagina's die naar de huidige geleid kunnen hebben. Het broodkruimelspoor geeft dus niet echt het gevolgde pad aan maar wel een mooi overzicht van de site-indeling. Op www.belastingdienst.nl zien we hier een voorbeeld van. Wie via 'privé' >'werk en inkomen'>..>..> op 'ondernemen' klikt, ziet dat het broodkruimelspoor verspringt naar 'zakelijk' > 'ondernemen' en dat terwijl we de pagina 'zakelijk' nooit hebben bezocht.

Een dynamisch broodkruimelspoor geeft de werkelijke browsegeschiedenis weer. Het script hieronder van deze site geeft een soort (zie rode opmerking verderop) dynamisch broodkruimelspoor aan. Hier spreekt men van een 'path-type breadcrumb' i.t.t. het 'location-type'.

Het lijkt mij dat het location-type het meest nuttig is. Al zijn de pagina's niet meer in mappen ondergebracht, toch is er een hiërarchie. Deze zien we ook terug in de slug van de uri. Begrijp goed dat de boomstructuur van de site iets anders is dan de keten van aangeklikte links. Heel mooi en functioneel vind ik www.zoover.nl. Naast een hoofdnavigatie hebben we hier een subnavigatiebalk die er uitziet als een broodkruimelspoor waarbij iedere broodkruimel een dropdownmenu bevat.

Klik hier om een level dieper te gaan zodat er een broodkruimel wordt toegevoegd.

Hieronder een heel eenvoudig en leuk script. Iedere pagina van de hele site moet met het onderste stukje code beginnen. Daarbij moet je per pagina wel de juiste paginanaam en het toegekende niveau van de juiste waarden voorzien en natuurlijk de naam en het adres van de breadcrumb-class. De werking: Als we op een pagina aanlanden dan wordt er een nieuwe broodkruimel toegevoegd in de vorm van drie parameters: een paginanaam (label) een linkadres ($_SERVER['PHP_SELF']) en een niveaugetal. Deze worden uiteindelijk bewaard in $_SESSION['breadcrumb']. Het is niet de bedoeling dat alle gepasseerde pagina's weergegeven worden en daarom worden alle kruimels van hetzelfde en/of hogere niveau verwijderd en vervangen door de actuele pagina. Zodoende krijg je dus het kortste spoor in opgaande lijn van bezochte pagina's naar de huidige pagina. Dat kan een spoor zijn dat helemaal niet bestaat. In het voorbeeld van de belastingsite hierboven krijg je: privé >ondernemen. En dat terwijl je van privé helemaal niet naar ondernemen kan. Alle werkelijke tussenstappen worden er uitgesnoeid, zodanig dat de levels een opeenvolgende reeks vormen. Pagina's die nooit bezocht zijn kunnen niet toegevoegd zijn aan het spoor. Alle kruimels van lagere niveau's dienen als link te worden weergegeven maar de actuele pagina juist weer niet. Daarin voorzien de regels 66 en 78 tot 86. Stel nu dat je vanuit een ander website direct op een level 4 pagina belandt dan zal hij een pagina index.php met het label 'home' veronderstellen maar verder ontbreken de tussenliggende schakel. Gelukkig is het geen probleem dat er een paar levels missen. De foreachloop geeft gewoon alle wel-aanwezige kruimes weer. Dit script geeft dus niet de sitestructuur aan. Alleen bezochte pagina's van een lager niveau worden in het broodkruimelspoor aangegeven. Waarschijnlijk is de maker van dit script ervan uitgegaan dat men altijd binnenkomt via de homepage.



Als er gebruik gemaakt wordt van een framework zoals Zend of CodeIgniter dan is de URI-slug al een soort van broodkruimelspoor. Wellicht bestaan er voor dergelijke sites wel speciale routines die aansluiten op het framework. Als je een volledig kruimelspoor wilt kunnen laten zien, ook als men op een willekeurige pagina binnenkomt dan is het m.i. onvermijdelijk dat de broodkruimelfunctie een soort sitemap bevat. Sommige sites bevatten trouwens een xml-sitemap met het oog op zoekmachines. Die zou je goed kunnen gebruiken voor je broodkruimelspoor.

Conclusie

Het hele concept van het broodkruimelspoor hinkt op twee gedachten: Wil je iemands omzwervingen op een site tonen, zodat hij de weg terug kan vinden (het oorspronkelijke idee van het broodkruimelspoor van Hans en Grietje) of wil je de plaats van de actuele pagina in de hiërarchie tonen. Als iedere pagina slechts via één pad te benaderen is, dan zou bovenstaand script een perfect statisch broodkruimelspoor geven. Echter, de links houden zich daar niet aan. Ze kunnen kriskras naar een willekeurig pagina verwijzen. Daardoor doet bovenstaand script geen van tweëen. Het is noch statisch, noch dynamisch. Het statische kruimelspoor op de belastingsite is ook niet ideaal. Het geeft de bezoeker juist niet het overzicht van het gevolgde pad, alleen maar het kortst mogelijke pad vanaf de landingspagina naar de actuele.

Hoe zou het ideaal er uit zien?

Aangezien er een subtiel verschil is, waarvan de meeste bezoekers zich niet bewust zijn, is het niet raadzaam om twee broodkruimelsporen te maken. Een 'plattegrond' van de site met een 'u bent hier' aanduiding, geeft een overzicht van de hiërarchie. Dat ziet er uit als een boom waarvan de bezochte knopen een kleur hebben al naar gelang ze bezocht, niet-bezocht of actueel zijn. Geeft ook een overzicht van wat er allemaal verder nog is; hoeveel inhoud de site heeft. Dit visuele kruimelspoor is twee-dimensionaal, een broodkruimelspoor is slechts een één-dimensionale rij. Dat is nu juist het voordeel: het is slechts één regeltje en niet een heel vlak. Al met al voel ik het meest voor een echt (dynamisch) kruimelpad, dus alles wat bezocht is in één lange sliert van links. Daarbij kan je nog kiezen om echt iedere aangeklikte link weer te geven of alleen het kortste pad. Dat laatste doet je browser ook: Als je teruggaat naar een eerdere pagina en je kiest een ander pad, dan vergeet hij het 'uitstapje'.