How can I implement product category breadcrumbs on the product page? These breadcrumbs will represent the parent category of the product.
I am utilizing Next.js and Strapi for this project.
For example, here is a screenshot showing how it should look:
https://i.sstatic.net/UZkRo.png
Below is the code snippet from my product details page.
product/[slug].js:
import { useRef, useState } from "react";
import { useEffect } from "react";
import { toast } from "react-toastify";
import { AiOutlineClose } from "react-icons/ai";
import { MdMarkEmailUnread } from "react-icons/md";
import { RiWhatsappFill } from "react-icons/ri";
import { useRouter } from "next/router";
import Link from "next/link";
import emailjs from "@emailjs/browser";
import ProductDetailsCarousel from "@/components/ProductDetailsCarousel";
import Wrapper from "@/components/wrapper";
import { fetchDataFromApi } from "@/utils/api";
import Breadcrumbs from "@/components/breadcrumbs";
const ProductDetails = ({ category, product, slug }) => {
// Code continues...
};
export default ProductDetails;
export async function getStaticPaths() {
// Function to fetch data from API
}
export async function getStaticProps({ params: { slug } }) {
// Function to fetch dynamic props based on the slug
}
In this product details page, I would like to include a breadcrumb component that shows the category navigation style at the top.