title: "Breadcrumbs" slug: "/packages/breadcrumbs" category: "control" componentNames:

• "Breadcrumbs"

Breadcrumbs

Breadcrumbs can be used to show users where they are within the datastory page hierarchy.

import Breadcrumbs from "@ds-kit/breadcrumbs"

Basic Example

The most basic breadcrumbs component returns a nav with aria-label="Breadcrumbs" and an ordered list of navigation items. For each item the component renders a link. The last item has an aria-current="page" attribute.

<Breadcrumbs
  links={[
    { key: 1, href: "/", label: "Home" },
    { key: 2, href: "/patterns", label: "Patterns" },
    { key: 3, href: "/patterns/blog-post", label: "Blog post pattern" },
  ]}
/>

Custom Links

To use the breadcrumbs component with a framework like next.js or gatsby, you can use the link prop to hook up a custom link component.

<Breadcrumbs
  links={[
    { href: "/", label: "Home" },
    { href: "/patterns", label: "Patterns" },
    { href: "/patterns/blog-post", label: "Blog post pattern" },
  ]}
  link={({ label, href }) =>
    <a href={href}>{label}</a>
  }
/>