Breadcrumbs

Breadcrumbs component to display the current path and add an easy way to go back to a previous page.

Breadcrumbs is based on The Chakra UI Breadcrumbs and its sub components. Please see API-reference for Chakra Breadcrumb Component

Usage

The component expects an array of Breadcrumbs. For navigation, you may either pass a href, but it is also possible to use Reach Router or React Router by passsing it through as with the path to.

Basic example

import { Breadcrumbs } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Breadcrumbs
      breadCrumbs={[
        { title: "First", href: "#" },
        { title: "Second", href: "#" },
        { title: "Third", href: "#" },
      ]}
    />
  );
}

Collapsed

The <Breadcrumbs>-component will internally handle the logic to collapse a long breadcrumb trail into a <Menu>. By default, this happens when items exceed a length of three.

To control the number of items shown before and after the collapsed menu, you can use the itemsBeforeCollapse (default 1) and itemsAfterCollapse (default 2) props. You can play around with the collapsing logic in the playground below.

import { Breadcrumbs, Grid, QuantityButton, Stack, Text, ThemeSpace } from "@caspeco/casper-ui-library";
import { useState } from "react";

export default function Demo() {
  const [itemCount, setItemCount] = useState(6);

  const [itemsBeforeCollapse, setItemsBeforeCollapse] = useState(1);
  const [itemsAfterCollapse, setItemsAfterCollapse] = useState(2);

  const breadCrumbs = Array.from({ length: itemCount }, (_, index) => ({
    title: `Item ${index + 1}`,
    href: "#",
  }));

  return (
    <Stack gap={ThemeSpace.Small}>
      <Text fontWeight="bold">Playground controls</Text>
      <Grid templateColumns="200px 1fr" gap={ThemeSpace.Small} alignItems="center">
        <label>Number of Items:</label>
        <QuantityButton
          value={itemCount}
          onValueChange={setItemCount}
          min={1}
          max={15}
          size="sm"
          aria-label="Number of items"
        />

        <label>Items Before Collapse:</label>
        <QuantityButton
          value={itemsBeforeCollapse}
          onValueChange={setItemsBeforeCollapse}
          max={5}
          size="sm"
          aria-label="Items before collapse"
        />

        <label>Items After Collapse:</label>
        <QuantityButton
          value={itemsAfterCollapse}
          onValueChange={setItemsAfterCollapse}
          max={5}
          size="sm"
          aria-label="Items after collapse"
        />
      </Grid>

      <Text fontWeight="bold" mt={ThemeSpace.Medium}>
        Result
      </Text>
      <Breadcrumbs
        breadCrumbs={breadCrumbs}
        itemsBeforeCollapse={itemsBeforeCollapse}
        itemsAfterCollapse={itemsAfterCollapse}
      />
    </Stack>
  );
}