Automatiske brødsmuler i Reactjs-applikasjoner

Bruk av brødsmuler på nettsiden gir en god brukeropplevelse. Med ett enkelt blikk kan du se hvor siden du besøker tilhører i hierarkiet, og hvordan du skal komme deg til toppnivå. Et bra scenario er nettbutikker, hvor produktene typisk er gruppert i logiske kategorier. Websider som ikke har et naturlig hierarkisk innhold har derimot ikke så mye å vinne på å innføre brødsmuler.

En bra måte å finne ut om websiden din skal vise brødsmulestier, er å lage et nettkart eller et diagram som representerer websidens navigasjonsarkitektur og så analysere om brødsmuler på siden vil gjøre det lettere for brukeren å navigere mellom kategorier.

Noen eksempler på brødsmulestier


Her kan du lett gå til kategorier som IKT eller en samleside for meninger


Dette bildet er fra IntelliJ og viser hvordan brødsmulesti også kan brukes i tradisjonelle applikasjoner


Her er strukturen ganske flat, så brødsmulene gir ikke så veldig mye. Du trenger heller ikke si «Du er her» og tilsvarende.

Fordeler med brødsmuler

– Du ser raskt hvor du er i strukturen og kan visualisere innholdet på siden.
– Du reduserer «Bounce Rate» på websiden. Brukere som kommer til feil side kan se hvor de er og bevege seg på det stedet de egentlig ønsket å besøke.
– Brødsmulene gir også Google greie hint om strukturen din, og kan derfor bidra til å gi deg flere besøk fra søk.

Brødsmule-tips

– Plasser stien øverst på siden, men under meny og hovednavigasjon. Dette er ikke en fast regel, men en vanlig konvensjon som brukere kjenner igjen
– Du trenger ikke «Du er her». Brukeren skjønner såpass ut i fra konteksten.
– En god regel er å bruke hele den hierarkiske stien slik at du inkluderer alle nivåer fra øverst til siden brukeren befinner seg på.
– Ikke lenk til siden du er på. Når det siste elementet mangler lenke så gir det brukeren en god indikasjon på hvilken side han er på.
– Ikke ha sti på forsiden. Det kan gjøre brukeren usikker på om han er på forsiden.

Automatiske smuler i Reactjs

Dersom du bruker Reactjs og react-router kan du få brødsmuler på siden uten særlig stor anstrengelse. Alt du trenger å gjøre å laste ned react-breadcrumbs, enten via github eller via npm (npm install –save react-breadcrumbs).

Slik ser den ut i bruk:

I react kan koden implementeres slik:

import React from 'react';
import Breadcrumbs from 'react-breadcrumbs';

module.exports = React.createClass({

    render(){
        return <Breadcrumbs />
    }
});

Dette vil gi deg en komponent som bare viser en brødsmulesti, så det kan tenkes at du vil ha mer kode rundt denne. Brødsmule-elementene blir hentet fra dine route-konfigurasjon og navnene på lenkene blir satt basert på displayName i dine routes.

Eksempel på bruk kan du se her: learnreact.robbestad.com, mens du på github-repoet finner kode-eksempler som viser deg hvordan du kan bruke det. Koden til learnreact.robbestad.com ligger også på .