3 files changed, 38 insertions, 0 deletions
diff --git a/apps/web-shared/src/components/breadcrumb/bread.svelte b/apps/web-shared/src/components/breadcrumb/bread.svelte
new file mode 100644
index 0000000..4cf0698
--- /dev/null
+++ b/apps/web-shared/src/components/breadcrumb/bread.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    export type sizes = "big"|"small";
+    export let size: sizes = "small";
+</script>
+<nav class="breadcrumbs {size === 'small' ? 'text-sm' : 'text-lg'}">
+    <ol class="flex flex-wrap gap-xxs">
+        <slot></slot>
+    </ol>
+</nav>
diff --git a/apps/web-shared/src/components/breadcrumb/crumb.svelte b/apps/web-shared/src/components/breadcrumb/crumb.svelte
new file mode 100644
index 0000000..7621de6
--- /dev/null
+++ b/apps/web-shared/src/components/breadcrumb/crumb.svelte
@@ -0,0 +1,22 @@
+<script>
+	export let name;
+	export let withArrow = false;
+	export let isLink = false;
+</script>
+<li class="breadcrumbs__item">
+    <span class="color-inherit {isLink ? 'cursor-pointer color-primary-light' : ''}"
+          on:click>{name}</span>
+    {#if withArrow}
+        <svg class="icon margin-left-xxxs color-contrast-low"
+             aria-hidden="true"
+             viewBox="0 0 16 16">
+            <polyline fill="none"
+                      stroke="currentColor"
+                      stroke-width="1"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-miterlimit="10"
+                      points="6.5,3.5 11,8 6.5,12.5 "></polyline>
+        </svg>
+    {/if}
+</li>
diff --git a/apps/web-shared/src/components/breadcrumb/index.ts b/apps/web-shared/src/components/breadcrumb/index.ts
new file mode 100644
index 0000000..485ed7b
--- /dev/null
+++ b/apps/web-shared/src/components/breadcrumb/index.ts
@@ -0,0 +1,7 @@
+import Bread from "./bread.svelte";
+import Crumb from "./crumb.svelte";
+
+export {
+    Bread,
+    Crumb
+};