diff --git a/package-lock.json b/package-lock.json
index d5bf686..7a274a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
         "prettier": "~3.3.3",
         "prettier-plugin-tailwindcss": "~0.6.6",
         "storybook": "~8.2.9",
+        "storybook-vue3-router": "^5.0.0",
         "tailwindcss": "~3.4.10",
         "typescript": "~5.5.4",
         "typescript-eslint": "~8.2.0",
@@ -5185,6 +5186,13 @@
         "he": "^1.2.0"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@vue/language-core": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.6.tgz",
@@ -12151,6 +12159,30 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/storybook-vue3-router": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/storybook-vue3-router/-/storybook-vue3-router-5.0.0.tgz",
+      "integrity": "sha512-Q5ePPv8xyYT+9IzcEMSAQeCT8OlPDX0rfUfYCmiYDXsGPvvDej2Oyid3wyaxZmU/LXt1XzMDRO3v9qk/EN6pXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "vue-router": "^4.2.5"
+      },
+      "peerDependencies": {
+        "@storybook/preview-api": "7.x||>=7.0.0-rc.0",
+        "@storybook/vue3": "7.x||>=7.0.0-rc.0",
+        "vue": "3.x",
+        "vue-router": "4.x"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/storybook/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -13680,6 +13712,22 @@
         "vue": ">=2"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.5.tgz",
+      "integrity": "sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "2.0.29",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.29.tgz",
diff --git a/package.json b/package.json
index 0a7ef2c..e7c84d0 100644
--- a/package.json
+++ b/package.json
@@ -89,6 +89,7 @@
     "prettier": "~3.3.3",
     "prettier-plugin-tailwindcss": "~0.6.6",
     "storybook": "~8.2.9",
+    "storybook-vue3-router": "^5.0.0",
     "tailwindcss": "~3.4.10",
     "typescript": "~5.5.4",
     "typescript-eslint": "~8.2.0",
diff --git a/src/primevue/breadcrumb/breadcrumb.stories.ts b/src/primevue/breadcrumb/breadcrumb.stories.ts
new file mode 100644
index 0000000..73c7f6e
--- /dev/null
+++ b/src/primevue/breadcrumb/breadcrumb.stories.ts
@@ -0,0 +1,64 @@
+import { Meta, StoryObj } from "@storybook/vue3";
+import Breadcrumb from "primevue/breadcrumb";
+import { html } from "@/lib/tags.ts";
+import { ref } from "vue";
+import { vueRouter } from "storybook-vue3-router";
+import HomeOutlineIcon from "~icons/material-symbols/home-outline";
+import ChevronRightIcon from "~icons/material-symbols/chevron-right";
+
+const meta: Meta<typeof Breadcrumb> = {
+  component: Breadcrumb,
+  tags: ["autodocs"],
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { Breadcrumb, HomeOutlineIcon, ChevronRightIcon },
+    setup() {
+      const items = ref([
+        { label: "", type: "home", route: "/" },
+        { label: "Gesetze & Verordnungen", route: "/laws" },
+        { label: "BGB Bürgerliches Gesetzbuch", route: "/bgb" },
+        { label: "Buch 2", route: "/book-2" },
+        { label: "Abschnitt 3" },
+        { label: "Untertitel 2" },
+        { label: "Kapitel 2" },
+        { label: "§ 312e Verletzung von Informationspflichten über Kosten" },
+      ]);
+
+      return { args, items };
+    },
+    template: html`
+      <div class="card flex justify-center">
+        <Breadcrumb :model="items">
+          <template #item="{ item, props }">
+            <router-link
+              v-if="item.route"
+              v-slot="{ href, navigate }"
+              :to="item.route"
+              custom
+            >
+              <a :href="href" v-bind="props.action" @click="navigate">
+                <span v-if="item.type === 'home'">
+                  <HomeOutlineIcon />
+                </span>
+                <span v-else> {{ item.label }} </span>
+              </a>
+            </router-link>
+            <span v-else>{{ item.label }}</span>
+          </template>
+          <template #separator>
+            <ChevronRightIcon />
+          </template>
+        </Breadcrumb>
+      </div>
+    `,
+  }),
+  decorators: [
+    vueRouter(), // This adds basic router functionality for the story
+  ],
+};
diff --git a/src/primevue/breadcrumb/breadcrumb.ts b/src/primevue/breadcrumb/breadcrumb.ts
new file mode 100644
index 0000000..392d790
--- /dev/null
+++ b/src/primevue/breadcrumb/breadcrumb.ts
@@ -0,0 +1,40 @@
+import { BreadcrumbPassThroughOptions } from "primevue/breadcrumb";
+import { tw } from "@/lib/tags.ts";
+
+const breadcrumb: BreadcrumbPassThroughOptions = {
+  list: () => {
+    const base = tw`m-0 flex list-none flex-wrap items-center p-0 leading-none`;
+    return {
+      class: {
+        [base]: true,
+      },
+    };
+  },
+  item: () => {
+    const base = tw`flex-no-wrap ris-label1-regular my-2 flex items-center`;
+    return {
+      class: {
+        [base]: true,
+      },
+    };
+  },
+  itemLink: () => {
+    const states = tw`outline-4 outline-offset-4 outline-blue-800 focus:outline`;
+    return {
+      class: {
+        "underline ris-link1-bold cursor-pointer inline-flex items-center":
+          true,
+        [states]: true,
+      },
+    };
+  },
+  separator: () => {
+    return {
+      class: {
+        "flex items-center text-gray-600 mx-2": true,
+      },
+    };
+  },
+};
+
+export default breadcrumb;
diff --git a/src/primevue/index.ts b/src/primevue/index.ts
index fee88bb..d53155e 100644
--- a/src/primevue/index.ts
+++ b/src/primevue/index.ts
@@ -17,6 +17,7 @@ import textarea from "./textarea/textarea";
 import toast from "./toast/toast";
 import select from "./select/select";
 import inputMask from "./inputMask/inputMask";
+import breadcrumb from "@/primevue/breadcrumb/breadcrumb";
 
 import { deDE } from "@/config/locale";
 
@@ -38,6 +39,7 @@ export const RisUiTheme = {
   autocomplete,
   select,
   inputMask,
+  breadcrumb,
 };
 
 export const RisUiLocale = {