Component reference

Breadcrumb

The trail of pages from the top of a site to the current one.

Preview

Current location

Earlier levels keep their links and the last item marks the current location; narrow screens may wrap long paths. These links jump to the example levels on this page.

packages/meowtail/stories/breadcrumb.stories.tsxline 14tsx

render: () => (
  <Stack gap="relaxed">
    <Breadcrumb
      items={[
        { label: "Workspace", href: "#breadcrumb-workspace" },
        { label: "Website redesign", href: "#breadcrumb-project" },
        { label: "Stage one component and interaction design notes" },
      ]}
    />
    <Section id="breadcrumb-workspace" title="Workspace">
      <p id="breadcrumb-project">Website redesign · Stage one</p>
    </Section>
  </Stack>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Breadcrumb } from "meowtail";

<Breadcrumb
  items={[
    { label: "Workspace", href: "#breadcrumb-workspace" },
    { label: "Website redesign", href: "#breadcrumb-project" },
    { label: "Stage one component and interaction design notes" },
  ]}
/>

API reference

Props

Prop	Type	Default
`items`Required	`readonly BreadcrumbItem[]`	–
`label`	`string`	`"Current location"`

Also takes className, children and the attributes and events of its root element.

DOM parts

rootlistitemlinkcurrentseparator

Registry

The component is registered as breadcrumb in the meowtail component registry.