@purpurds/breadcrumbs

import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as BreadcrumbsStories from "./src/breadcrumbs.stories"; import packageInfo from "./package.json";

Breadcrumbs

Version {packageInfo.version}

When a website has a lot of pages, breadcrumbs can help a user find their current location within the overal hierarchy. This page shows how you can make breadcrumbs accessible to all users.

Use them when you have several levels of navigation and want to make the parent pages available as navigation.

Accessibility

The Purpur breadcrumbs are accessible by default according to best practices. The last BreadcrumbsItem is the one belonging to the page the user is currently on.

Meta Data & SEO

Another benefit of helping the user find their way, is that we also help the search engines increasing understanding of our site.

By default, the breadcrumbs will render a JSON+LD script tag with structured meta data extracted from the breadcrumb items.

Custom Link Component

If you need a custom link, perhaps to use a router, like the next/link component, you can simply pass your custom link component and skip the href property on Breadcrumbs.Item, only passing it directly to <Link />.

Showcase

Properties

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/breadcrumbs": "x.y.z"

From outside the monorepo (build-time)

To install this package, you need to setup access to the artifactory. Click here to go to the guide on how to do that.

---

In MyApp.tsx

import "@purpurds/tokens/index.css";

and

import "@purpurds/breadcrumbs/styles";

In MyComponent.tsx

import { Breadcrumbs } from "@purpurds/breadcrumbs";

export const MyComponent = () => {
  return (
    <Breadcrumbs>
      <Breadcrumbs.Item href="/ships" onClick={() => console.log("clicking on ships")}>
        Ships
      </Breadcrumbs.Item>
      <Breadcrumbs.Item href="/ships/twin-seaters/">Twin Seaters</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/ships/twin-seaters/naboo-n1">N1 Starfighter</Breadcrumbs.Item>
    </Breadcrumbs>
  );
};

Custom Link

With a custom link component such as next/link:

import { Breadcrumbs } from "@purpurds/breadcrumbs";
import Link from "next/link";

export const MyComponent = () => {
  return (
    <Breadcrumbs>
      <Breadcrumbs.Item>
        <Link href="/ships">Ships</Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Link href="/ships/twin-seaters">Twin Seaters</Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Link href="/ships/twin-seaters/naboo-n1">N1 Starfighter</Link>
      </Breadcrumbs.Item>
    </Breadcrumbs>
  );
};