feat: add breadcrumbs bar for the connection page

src/components/BreadcrumbBar/BreadcrumbBar.tsx

@@ -0,0 +1,15 @@
+import './breadcrumbbar.css'
+
+function BreadcrumbBar(){
+    return(
+        <nav className="breadcrumb-bar-nav">
+            <ul className="breadcrumb-bar-ul">
+                <li className="breadcrumb-bar-li">Nodes</li>
+                <li className="breadcrumb-bar-li">Nimbus</li>
+                <li className="breadcrumb-bar-li">Connect Device</li>
+            </ul>
+        </nav>
+    )
+}
+
+export default BreadcrumbBar

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;
+}

src/components/BreadcrumbBar/chevron.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path d="M7.75006 14.5L12.2503 9.99994L7.75 5.50002" stroke="#09101C" stroke-width="1.2"/>
+    </svg>