Hopp til innhold

Breadcrumb

En brødsmulesti brukes der man har en trestruktur i navigasjonen, og det er behov for å synliggjøre hvor i denne strukturen brukeren befinner seg.

Brødsmulestien vises typisk høyt oppe på siden, gjerne rett under headeren. Dersom en brødsmulesti brukes i applikasjonen skal den vises på alle sider som ikke er forsiden. Alle elementene i brødsmulestien skal være klikkbare lenker, men den nåværende siden skal se ut som vanlig tekst.

Tilgjengelighet

En brødsmulesti har potensielt mange interaktive elementer som en tastaturbruker lett må komme seg forbi. Det er derfor viktig at skip-link til hovedinnholdet også hopper over brødsmulestien.

Når bruker vi Breadcrumb?

Vi bruker en brødsmulesti når det er en trestruktur i navigasjonen – tenk mapper.

Det blir typisk et behov først når det er tre eller flere nivåer. Likevel, dersom en brødsmulesti brukes i applikasjonen overhode skal den vises på alle sider som ikke er forsiden – altså selv på nivå to.

Vi bruker ikke brødsmulestier når det er en lineær navigasjon, for eksempel for de ulike stegene i en kjøpsflyt eller et oppsigelsesskjema.

Om det bare er to nivåer i strukturen bruker vi typisk en back-variant av NavLink.

Eksempel med router

Jøkul-komponentene er uavhengige av router. Et tips er å lage en komponent i ditt eget prosjekt som bruker Jøkul-komponenter sammen med eventuelle Link-komponenter og smartness som tilbys av router-biblioteket du bruker.

Del ditt eksempel! Om du har et eksempel for en annen router, eller for annen major-versjon, så er det en stor hjelp for kollegene dine om du deler. Åpne en pull request og vis fram hvordan du har gjort det.

React Router DOM

Versjon 6

import React, { useMemo } from "react";
import type { RouteObject } from "react-router-dom";
import { Link, matchRoutes, useMatch, useLocation } from "react-router-dom";
import { Breadcrumb, BreadcrumbItem } from "@fremtind/jkl-breadcrumb-react";

export interface MyBreadcrumbProps {
    routes: RouteObject[];
}

export const MyBreadcrumb = ({ routes }: MyBreadcrumbProps) => {
    const location = useLocation();

    const matches = useMemo(() => {
        const routeMatches = matchRoutes(routes, location);
        return [{ pathname: "/", route: { element: "Hjem" } }, ...routeMatches];
    }, [location]);

    const isHjem = useMatch("/");

    if (isHjem) {
        return null;
    }

    return (
        <Breadcrumb>
            {matches.map((match, i) => {
                return (
                    <BreadcrumbItem key={match.pathname}>
                        <Link to={match.pathname}>{match.route.element}</Link>
                    </BreadcrumbItem>
                );
            })}
        </Breadcrumb>
    );
};

React API

Her finner du en oversikt over props på komponentene i pakken.