Martin Koksrud Bekkelund

Hva er en navigasjonssti?

Du har helt sikkert sett en navigasjonssti. Nettsteder over en viss størrelse, der strukturen lett kan bli uoversiktlig for brukeren, tilbyr en navigasjonssti som lar brukeren se hvor i hierarkiet eller informasjonsstrukturen brukeren befinner seg.

Et eksempel på en navigasjonssti:

Begrepet navigasjonssti stammer fra det engelske uttrykket “Breadcrumbs” i historien om Hans og Grete, hvor Hans etterlot brødsmuler på deres vei gjennom skogen, for å finne veien hjem. Det finnes tre typer navigasjonsstier:

• Sti: Viser veien brukeren har gått gjennom strukturen for å havne der han eller hun befinner seg.
• Lokasjon: Viser hvor i strukturen den aktuelle siden befinner seg.
• Attributt: Informasjon for å kategorisere den aktuelle siden.

Gitt disse tre typene, er det ideelt sett feil å kalle “Breadcrumbs” for navigasjonssti, ettersom sti kun er en av typene. Navigasjonssti er imidlertid mest utbredt, og jeg har alltid kalt det navigasjonssti selv. I tillegg ble det borte hos Martin Gjesdal mer eller mindre opplest og vedtatt at “Breadcrumbs” skal oversettes til “Navigasjonssti” på norsk.

Jacob Nielsen mener for øvrig at navigasjonsstier er en god ting.

Ønsker du flere detaljer om navigasjonssti, kan du lese mer hos Wikipedia.

Et eksempel

Jeg vil eksemplifisere denne posten med lokasjon, selv om den ikke harmonerer helt med historien om Hans og Grete. Årsaken til at jeg benytter lokasjon fremfor sti, er at det er mest vanlig, samt at jeg mener det er mest logisk for brukeren. I tillegg er det enklere å implementere lokasjon fremfor en sti, da sti også stiller visse krav til klienten, det vil si nettleseren.

Ta følgende struktur:

Å vise et slikt element vil både være plasskrevende og lite vennlig for brukere med spesielle behov, for eksempel blinde eller svaksynte. Her skal jeg vise hvordan man med XHTML og CSS utarbeider en liten og brukervennlig navigasjonssti for eksemplet over.

XHTML

Det første du trenger er XHTML-koden til navigasjonsstien. Den består typisk av en liste, og kan se slik ut:

1. <dl id=”location”>
2. <dt id=”location_description”>Du er her:</dt>
3. <dd id=”location_first”><a href=”#”>Hovedsiden</a></dd>
4. <dd><a href=”#”>Produkter</a></dd>
5. <dd id=”location_last”><a href=”#”>Datamaskiner</a></dd>
6. </dl>

Jeg har laget engelske identifikatorer, slik at jeg kan gjenbruke listen min ved behov.

Navigasjonsstien vil foreløpig se ut som følger:

Resultatet av denne listen er ikke spesielt sexy, så vi må ty til litt enkel CSS for å pynte på utseendet.

CSS

1. dl#location {
2. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
3. font-size: 70%;
4. line-height: 1.6;
5. }
6.  
7. dl#location dt {
8. display: inline;
9. }
10.  
11. dl#location dd {
12. margin: 0;
13. padding: 0;
14. display: inline;
15. background-image: url(“navigasjonssti_skiller.png”);
16. background-position: 0 50%;
17. background-repeat: no-repeat;
18. }
19.  
20. dl#location dd a {
21. margin: 0;
22. padding: 0 0 0 12px;
23. }

Med denne enkle CSS-en vil navigasjonsstien nå se ut som følger:

Svaksynte kan også skalere denne løsningen, selv om skilletegnet ikke skaleres tilsvarende.

Jeg har kun testet koden i Firefox, Opera og Safari på Mac, hvilket skulle tilsi at den fungerer i de fleste oppegående nettlesere. (Internet Explorer er ikke en av de, så hvis resultatet ser guffent ut der, kan du gjerne legge igjen en kommentar til forslag med kodeendring.)

Oppsummering

Dette er altså en måte å gjøre det på. Det finnes minst like mange andre måter å gjøre det på, som det finnes lesere av bekkelund.net. Har du en måte å gjøre det på som du mener er mye, mye bedre enn denne, er det selvfølgelig bare å legge igjen en kommentar. Hvordan denne løsningen fungerer i talebaserte nettlesere er jeg usikker på.

WWW