Breadcrumb component

src/components/BreadcrumbNav.svelte

@@ -0,0 +1,62 @@
+<div class="flex flex-row mb-4">
+  <div class="w-full">
+    <nav class="w-full flex">
+      <ol class="list-none flex flex-row items-center justify-start">
+        <li class="mr-2 flex items-center">
+          <svg
+            stroke="currentColor"
+            fill="none"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-3 w-3 stroke-current"
+            height="1em"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"><path
+              d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+            <polyline points="9 22 9 12 15 12 15 22" /></svg>
+        </li>
+        <li class="flex items-center">
+          <a class="mr-2" href="/">Home</a><svg
+            stroke="currentColor"
+            fill="none"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-3 w-3 mr-2 stroke-current"
+            height="1em"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"><line
+              x1="5"
+              y1="12"
+              x2="19"
+              y2="12" />
+            <polyline points="12 5 19 12 12 19" /></svg>
+        </li>
+        <li class="flex items-center">
+          <a class="mr-2" href="/">Second level</a><svg
+            stroke="currentColor"
+            fill="none"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-3 w-3 mr-2 stroke-current"
+            height="1em"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"><line
+              x1="5"
+              y1="12"
+              x2="19"
+              y2="12" />
+            <polyline points="12 5 19 12 12 19" /></svg>
+        </li>
+        <li class="flex items-center">
+          <a class="mr-2" href="/">Third level</a>
+        </li>
+      </ol>
+    </nav>
+  </div>
+</div>

src/components/Dashboard.svelte

@@ -4,6 +4,7 @@
   import Pagination from "./Pagination.svelte";
   import FormLayout from "./FormLayout.svelte";
   import Tracks from "./Tracks.svelte";
+  import BreadcrumbNav from "./BreadcrumbNav.svelte";
 </script>
 
 <div>
@@ -275,6 +276,7 @@
   </header>
   <main>
     <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+      <BreadcrumbNav/>
       <!--  -->
       <StatCards />
       <!--  -->