Added breadcrumb

src/components/Breadcrumb/Breadcrumb.jsx

+import React from 'react';
+import style from './Breadcrumb.module.scss';
+
+function Breadcrumb(props) {
+    const { items = [] } = props;
+    return (
+        <ul className={style.breadcrumb}>
+            {
+                items.map(item => {
+                    return (
+                        <li>
+                            <a href={item.url}>{item.name}</a>
+                        </li>
+                    )
+                })
+            }
+        </ul>
+    );
+}
+
+export default Breadcrumb;
\ No newline at end of file

src/components/Breadcrumb/Breadcrumb.module.scss

+.breadcrumb {
+    display: flex;
+    margin: 0;
+    margin-left: 5vh;
+
+    li {
+        list-style: none;
+        margin: 0 10px;
+        text-transform: capitalize;
+    }
+}
\ No newline at end of file

src/components/Breadcrumb/index.js

+import Breadcrumb from './Breadcrumb';
+
+export default Breadcrumb;
\ No newline at end of file

src/pages/PDP/PDP.jsx

@@ -2,12 +2,18 @@ import React, { Component } from 'react';
 import style from './PDP.module.scss';
 import ProductDetails from 'models/productDetail';
 import ImageCarousel from 'components/ImageCarousel';
+import Breadcrumb from 'components/Breadcrumb';
 
 class PDPPage extends Component {
 
     state = {
         showImageCarousel: false
-    }
+    };
+
+    breadcrumb = [
+        { name: 'home', url: '/' },
+        { name: 'All New', url: '/shop/new' },
+    ];
 
     componentDidMount() {
         const { match: { params: { productId } } } = this.props;
@@ -22,10 +28,11 @@ class PDPPage extends Component {
     render() {
         const { product } = this.props;
         const { showImageCarousel } = this.state;
-
         const { name, image, sellingPrice, images } = new ProductDetails(product);
+        const breadcrumbData = [...this.breadcrumb, { name, url: '#' }];
         return (
             <section className={style.PDPPage}>
+                <Breadcrumb items={breadcrumbData} />
                 <div className={style.content}>
                     <div className={style.images} onClick={this.toggleImageCarouselClose}>
                         <img

src/pages/PDP/PDP.module.scss

@@ -2,6 +2,7 @@
 
 .PDPPage {
     margin-top: $large-footer-height;
+    padding-top: 10px;
 
     h1 {
         color: $gray2;