Breadcrumbs

Usage

The Breadcrumbs component renders a trail of links to help users navigate through a website. It is used to show the user's current location within the website's hierarchy. The component is designed to worked inside the Footer element and can be imported like this:

import Breadcrumbs from "@finanzchef24gmbh/design-system/src/Breadcrumbs";

Props

Breadcrumbs takes a single prop called crumbs which is an array of objects. Each object represents a Breadcrumb item and has the following properties:

NameRequiredDescription
labeltrueText to be shown
slugtrueValue for the link's href
dividerIconfalseAn Icon to replace the default ChevronRight

Breacrumbs

Example

<Breadcrumbs
  crumbs={[
    {
      label: "Startseite",
      slug: "/",
    },
    {
      label: "Gewerbe- und Firmen­versicherung",
      slug: "/2",
    },
    {
      label: "Firmen­rechtsschutz",
      slug: "/3",
    },
  ]}
/>