React.js で簡単なパンくずリストを作ってみます。
Googleで検索しても良い感じのコンポーネントが見つからなかったため、
練習も兼ねて自作致しました。

完成イメージ

開発環境

以下の環境で動作を確認しました。

React.js 17.0.1
Next.js 10.0.5
Tailwind CSS 2.0.2

実装を行う

アイコンモジュールをインストール（省略可能）

矢印には React icons のアイコンを使用していますので、
モジュールをインストールします。

yarn add react-icons

コンポーネントを作る

Next.js を使用しているため、components/にbreadcrumbs.jsという名前で配置しました。

import { FaChevronRight } from "react-icons/fa";

export default function BreadCrumbs({ lists }) {
  if(!lists){ 
    return('')
  }
  
  return (
    <ol className="flex font-bold overflow-x-auto whitespace-nowrap" aria-label="breadcrumb">
      {lists.map(({ string, path }, index) => (
          <li className="flex items-center" key={index}>
            {lists.length - 1 !== index 
              ?
              <>
                <a className="text-gray-900 text-sm md:text-base underline" href={path}>{string}</a>
                <FaChevronRight aria-hidden="true" className="text-xs mx-2"/>
              </>
              : <span className="text-sm md:text-base" aria-current="page">{string}</span>
            }
          </li>
      ))}
    </ol>
  );
}

コンポーネントを呼び出す

propsのlistsに連想配列を指定します。
stringにはテキスト、pathにはパスを指定します。

import BreadCrumbs from "../components/breadcrumbs";

<BreadCrumbs 
  lists={[
    {
      string: "トップページ",
      path: "/",
    },
    {
      string: post.title,
    }
  ]}
/>

以上で実装は完了です。
ページが大量にある場合は React Router などのルーターと連携するコンポーネントを使用された方が
良いかと思われますが、小規模のアプリであればこれでも十分かと思われます。
よろしければご活用ください。