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.

Eksempler Bruk Kode

Kom i gang

Installer

npm i @fremtind/jkl-breadcrumb-react

Bruk

import { Breadcrumb } from "@fremtind/jkl-breadcrumb-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-breadcrumb/breadcrumb.min.css";

// Eller importer stilark via SCSS.
@use "@fremtind/jkl-breadcrumb/breadcrumb";

React

Versjon
Dokumentasjon: Readme; Changelog

Live demo

Breadcrumb

const className = "jkl-" + 'body';
return (
  <div className={className}>
    <Breadcrumb>
      <BreadcrumbItem>
        <a href="/">Hjem</a>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <a href="/komponenter/accordion">Komponenter</a>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <a href="/komponenter/breadcrumb">Breadcrumb</a>
      </BreadcrumbItem>
    </Breadcrumb>
  </div>
);

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. Ta kontakt med oss og vis frem 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.