diff --git a/src/components/BreadcrumbBar/BreadcrumbBar.tsx b/src/components/BreadcrumbBar/BreadcrumbBar.tsx
new file mode 100644
index 00000000..994f6691
--- /dev/null
+++ b/src/components/BreadcrumbBar/BreadcrumbBar.tsx
@@ -0,0 +1,15 @@
+import './breadcrumbbar.css'
+
+function BreadcrumbBar(){
+ return(
+
+ )
+}
+
+export default BreadcrumbBar
\ No newline at end of file
diff --git a/src/components/BreadcrumbBar/breadcrumbbar.css b/src/components/BreadcrumbBar/breadcrumbbar.css
new file mode 100644
index 00000000..9729a000
--- /dev/null
+++ b/src/components/BreadcrumbBar/breadcrumbbar.css
@@ -0,0 +1,35 @@
+.breadcrumb-bar-nav {
+ width: 100%;
+ flex: 1 1 100%;
+ padding: 1rem 2rem;
+ margin: 0.5rem;
+}
+.breadcrumb-bar-ul {
+ list-style-type: none;
+ display: flex;
+ padding: 0;
+ margin: 0;
+}
+.breadcrumb-bar-li {
+ padding: 0 1em;
+ color: #647084;
+ font-size: 15px;
+ font-weight: 500;
+ position: relative;
+}
+.breadcrumb-bar-li::after {
+ display: inline-block;
+ content: url("./chevron.svg");
+ color: #09101C;
+ position: absolute;
+ top: -2px;
+ left: 100%;
+ transform: translateX(-50%);
+}
+.breadcrumb-bar-li:last-child {
+ color: #09101C;
+
+}
+.breadcrumb-bar-li:last-child::after {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/components/BreadcrumbBar/chevron.svg b/src/components/BreadcrumbBar/chevron.svg
new file mode 100644
index 00000000..51d118e0
--- /dev/null
+++ b/src/components/BreadcrumbBar/chevron.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file