> For the complete documentation index, see [llms.txt](https://docs.modules.liquidcloud.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.modules.liquidcloud.app/modules/react/breadcrumbs.md).

# Breadcrumbs

<figure><img src="/files/82TuSUIf5sR90pMbWTVS" alt=""><figcaption></figcaption></figure>

### Usage

```jsx
import { LiquidBreadcrumb } from '@liquidcloud/modules-react';
import { FC } from 'react';

const Component: FC = () => {
  return (
    <LiquidBreadcrumb
      items={JSON.stringify([
        { label: 'Home', href: '/' },
        { label: 'Collection', href: '/collection' },
        { label: 'Sub-collection', href: '/sub-collection' },
      ])}
      current="Product Name"
    />
  );
};

export default Component;
```

### Properties

| property | type              | default | description                                                                       |
| -------- | ----------------- | ------- | --------------------------------------------------------------------------------- |
| items    | `array \| string` | -       | A stringified list of objects containing label and href for each breadcrumb item. |
| current  | `string`          | -       | The current page name.                                                            |
|          |                   |         |                                                                                   |