diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
index 7466ad0..c18e907 100644
--- a/.github/workflows/unit-test.yml
+++ b/.github/workflows/unit-test.yml
@@ -36,6 +36,8 @@ jobs:
         run: pnpm run test:unit:coverage
 
       - name: Codecov
-        uses: codecov/codecov-action@v3.1.5
+        uses: codecov/codecov-action@v4
         with:
-          directory: ./coverage
+          directory: ./tests/unit/coverage
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
diff --git a/demo/package.json b/demo/package.json
index 1f123a6..667fce9 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -13,8 +13,8 @@
     "preinstall": "npx only-allow pnpm"
   },
   "dependencies": {
-    "@astrojs/mdx": "^2.1.0",
-    "astro": "^4.2.6"
+    "@astrojs/mdx": "^2.1.1",
+    "astro": "^4.3.0"
   },
   "devDependencies": {
     "sass": "^1.70.0"
diff --git a/demo/src/pages/de/category/astro/long-path/index.astro b/demo/src/pages/de/category/astro/long-path/index.astro
new file mode 100644
index 0000000..48dc4f0
--- /dev/null
+++ b/demo/src/pages/de/category/astro/long-path/index.astro
@@ -0,0 +1,30 @@
+---
+import Layout from "../../../../../layouts/Layout.astro";
+import Breadcrumbs from "../../../../../../../src/Breadcrumbs.astro";
+---
+
+<Layout title="Welcome to Astro Breadcrumbs.">
+  <main>
+    <h1><span class="text-gradient">Astro</span> Breadcrumbs Examples</h1>
+
+    <h2>Example 1 - Custom separator</h2>
+    <div style="max-width: 500px; margin: 0 auto">
+      <Breadcrumbs indexText={"home"} truncated={true}>
+        <!-- Add icon or text here -->
+        <svg
+          slot="separator"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          ><polyline points="9 18 15 12 9 6"></polyline>
+        </svg>
+      </Breadcrumbs>
+    </div>
+  </main>
+</Layout>
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 496abd4..29785f0 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -1,6 +1,7 @@
 import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
 import matomo from "astro-matomo";
+import starlightLinksValidator from "starlight-links-validator";
 
 // https://astro.build/config
 export default defineConfig({
@@ -50,6 +51,7 @@ export default defineConfig({
           ],
         },
       ],
+      plugins: [starlightLinksValidator()],
     }),
     matomo({
       enabled: import.meta.env.PROD,
diff --git a/docs/package.json b/docs/package.json
index b8e4c09..3173e41 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -10,11 +10,12 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.17.0",
-    "astro": "^4.2.6",
+    "@astrojs/starlight": "^0.17.2",
+    "astro": "^4.3.0",
     "astro-breadcrumbs": "^1.9.0",
     "astro-matomo": "^1.4.2",
-    "sharp": "^0.33.2"
+    "sharp": "^0.33.2",
+    "starlight-links-validator": "^0.5.2"
   },
   "devDependencies": {
     "sass": "^1.70.0"
diff --git a/docs/src/content/docs/configuration/properties.mdx b/docs/src/content/docs/configuration/properties.mdx
index feb53e5..0b54904 100644
--- a/docs/src/content/docs/configuration/properties.mdx
+++ b/docs/src/content/docs/configuration/properties.mdx
@@ -5,13 +5,13 @@ description: "Learn more about the properties of the Astro Breadcrumbs component
 
 import { Breadcrumbs } from "astro-breadcrumbs";
 
-## indexText
+## ariaLabel
 
 **Type:** `string`
 
-**Default:** `Home`
+**Default:** `breadcrumbs`
 
-Label of the first nav element.
+Controls the `aria-label` on the parent element (`<nav>`).
 
 **Usage:**
 
@@ -20,27 +20,27 @@ Label of the first nav element.
 import { Breadcrumbs } from "astro-breadcrumbs";
 ---
 
-<Breadcrumbs indexText="Home" />
+<Breadcrumbs ariaLabel="a structured list of pages" />
 ```
 
 **Rendered Component:**
 
-<Breadcrumbs indexText="Home" />
+<Breadcrumbs ariaLabel="a structured list of pages" />
 
-## mainBemClass
+## baseUrl
 
 **Type:** `string`
 
-**Default:** `c-breadcrumbs`
+**Default:** `undefined`
 
-CSS BEM root class.
+By default Astro-Breadcrumbs creates all links with relative urls. If you have other requirements you can use this property to customize the start of the url.
 
-:::caution
-If you use the optional SCSS file, make sure you set the same class name in you're SCSS config file. [$bem-root](/styling/scss-api/#bem-root) needs to be adjusted.
+:::note
+Make sure you pass the the URL without a trailing slash. Otherwise you get an console warning and the URLs will be fallback to relative.
 :::
 
-:::danger
-If you use the optional CSS file, all styles will be broken. Please add your own CSS or use the SCSS styles with customized [$bem-root](/styling/scss-api/#bem-root) prop.
+:::caution
+If you use custom [`crumbs`](#crumbs), [`baseUrl`](#baseurl) will be disabled.
 :::
 
 **Usage:**
@@ -50,34 +50,12 @@ If you use the optional CSS file, all styles will be broken. Please add your own
 import { Breadcrumbs } from "astro-breadcrumbs";
 ---
 
-<Breadcrumbs mainBemClass="o-bread-crumb" />
-```
-
-**Rendered Component:**
-
-<Breadcrumbs mainBemClass="o-bread-crumb" />
-
-## ariaLabel
-
-**Type:** `string`
-
-**Default:** `breadcrumbs`
-
-Controls the `aria-label` on the parent element (`<nav>`).
-
-**Usage:**
-
-```astro
----
-import { Breadcrumbs } from "astro-breadcrumbs";
----
-
-<Breadcrumbs ariaLabel="a structured list of pages" />
+<Breadcrumbs baseUrl="https://base.url/page" />
 ```
 
 **Rendered Component:**
 
-<Breadcrumbs ariaLabel="a structured list of pages" />
+<Breadcrumbs baseUrl="https://base.url/page" />
 
 ## crumbs
 
@@ -124,7 +102,6 @@ const customCrumbs = [
 ---
 
 <Breadcrumbs crumbs={customCrumbs} />
-
 ```
 
 **Rendered Component:**
@@ -148,20 +125,64 @@ const customCrumbs = [
   ]}
 />
 
-## baseUrl
+## ellipsisAriaLabel
 
 **Type:** `string`
 
-**Default:** `undefined`
+**Default:** `Show hidden navigation`
 
-By default Astro-Breadcrumbs creates all links with relative urls. If you have other requirements you can use this property to customize the start of the url.
+`aria-label` of the ellipsis button (`.c-breadcrumbs__truncated-button`).
 
-:::note
-Make sure you pass the the URL without a trailing slash. Otherwise you get an console warning and the URLs will be fallback to relative.
-:::
+**Usage:**
+
+```astro
+---
+import { Breadcrumbs } from "astro-breadcrumbs";
+---
+
+<Breadcrumbs ellipsisAriaLabel="a structured list of pages" />
+```
+
+**Rendered Component:**
+
+<Breadcrumbs ellipsisAriaLabel="Show nav" />
+
+## indexText
+
+**Type:** `string`
+
+**Default:** `Home`
+
+Label of the first nav element.
+
+**Usage:**
+
+```astro
+---
+import { Breadcrumbs } from "astro-breadcrumbs";
+---
+
+<Breadcrumbs indexText="Home" />
+```
+
+**Rendered Component:**
+
+<Breadcrumbs indexText="Home" />
+
+## mainBemClass
+
+**Type:** `string`
+
+**Default:** `c-breadcrumbs`
+
+CSS BEM root class.
 
 :::caution
-If you use custom [`crumbs`](#crumbs), [`baseUrl`](#baseurl) will be disabled.
+If you use the optional SCSS file, make sure you set the same class name in you're SCSS config file. [$bem-root](/styling/scss-api/#bem-root) needs to be adjusted.
+:::
+
+:::danger
+If you use the optional CSS file, all styles will be broken. Please add your own CSS or use the [SCSS styles](/styling/setup-scss-config/) with customized [$bem-root](/styling/scss-api/#bem-root) prop.
 :::
 
 **Usage:**
@@ -171,12 +192,12 @@ If you use custom [`crumbs`](#crumbs), [`baseUrl`](#baseurl) will be disabled.
 import { Breadcrumbs } from "astro-breadcrumbs";
 ---
 
-<Breadcrumbs baseUrl="https://base.url/page" />
+<Breadcrumbs mainBemClass="o-bread-crumb" />
 ```
 
 **Rendered Component:**
 
-<Breadcrumbs baseUrl="https://base.url/page" />
+<Breadcrumbs mainBemClass="o-bread-crumb" />
 
 ## schemaJsonScript
 
@@ -258,3 +279,44 @@ import { Breadcrumbs } from "astro-breadcrumbs";
 **Rendered Component:**
 
 <Breadcrumbs trailingSlash={true} />
+
+## truncated
+
+**Type:** `boolean`
+
+**Default:** `false`
+
+With the setting `true`, the breadcrumbs that no longer fit in a line are truncated and an ellipsis button is displayed.
+
+Only the first element and the last element are displayed, with the ellipsis button in between.
+
+A click on the ellipsis button shows all truncated elements.
+
+The calculation is carried out using ResizeObserver and is therefore responsive.
+
+The width of all elements is calculated together and compared with the available width. If the elements are larger than the available width, they are truncated.
+
+**Usage:**
+
+```astro
+---
+import { Breadcrumbs } from "astro-breadcrumbs";
+---
+
+<Breadcrumbs truncated={true} />
+```
+
+:::caution
+If you use the SCSS style file, you need to opt-in `$truncated: true` within the [SCSS Style Api](/styling/scss-api/#truncated). (This does not apply to the CSS variant.)
+:::
+
+```scss
+// astro-breadcrumbs-config.scss
+@use "astro-breadcrumbs/breadcrumbs.scss" with (
+  $truncated: true
+);
+```
+
+**Rendered Component:**
+
+<Breadcrumbs truncated={true} />
diff --git a/docs/src/content/docs/configuration/slots.mdx b/docs/src/content/docs/configuration/slots.mdx
index c27f7e0..d199db5 100644
--- a/docs/src/content/docs/configuration/slots.mdx
+++ b/docs/src/content/docs/configuration/slots.mdx
@@ -5,24 +5,22 @@ description: "Learn how to use the slots of the Astro Breadcrumbs component."
 
 import { Breadcrumbs } from "astro-breadcrumbs";
 
+## ellipsis
 
-## separator
-
-**Default:** `-`
+**Default:** `…`
 
-Add custom elements like svg's or icons after the `<a>` tag.
+Content of the `.c-breadcrumbs__truncated-button`.
 
 **Usage:**
 
-```astro
+```astro {7}
 ---
 import { Breadcrumbs } from "astro-breadcrumbs";
 ---
 
 <Breadcrumbs>
-
   <svg
-    slot="separator"
+    slot="ellipsis"
     xmlns="http://www.w3.org/2000/svg"
     width="24"
     height="24"
@@ -32,9 +30,9 @@ import { Breadcrumbs } from "astro-breadcrumbs";
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-    ><polyline points="9 18 15 12 9 6"></polyline>
-  </svg>
-
+    ><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"
+    ></circle><circle cx="5" cy="12" r="1"></circle></svg
+  >
 </Breadcrumbs>
 ```
 
@@ -42,19 +40,22 @@ import { Breadcrumbs } from "astro-breadcrumbs";
 
 <Breadcrumbs>
 
-  <svg
-    slot="separator"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    ><polyline points="9 18 15 12 9 6"></polyline>
-  </svg>
+<svg
+  slot="ellipsis"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="1"></circle>
+  <circle cx="19" cy="12" r="1"></circle>
+  <circle cx="5" cy="12" r="1"></circle>
+</svg>
 
 </Breadcrumbs>
 
@@ -66,13 +67,12 @@ import { Breadcrumbs } from "astro-breadcrumbs";
 
 **Usage:**
 
-```astro
+```astro {7}
 ---
 import { Breadcrumbs } from "astro-breadcrumbs";
 ---
 
 <Breadcrumbs>
-
   <svg
     slot="index"
     aria-label="Home Page"
@@ -85,10 +85,9 @@ import { Breadcrumbs } from "astro-breadcrumbs";
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-    ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
-    </path><polyline points="9 22 9 12 15 12 15 22"></polyline>
+    ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"> </path><polyline
+      points="9 22 9 12 15 12 15 22"></polyline>
   </svg>
-
 </Breadcrumbs>
 ```
 
@@ -96,9 +95,41 @@ import { Breadcrumbs } from "astro-breadcrumbs";
 
 <Breadcrumbs>
 
+<svg
+  slot="index"
+  aria-label="Home Page"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+  <polyline points="9 22 9 12 15 12 15 22"></polyline>
+</svg>
+
+</Breadcrumbs>
+
+## separator
+
+**Default:** `-`
+
+Add custom elements like svg's or icons after the `<a>` tag.
+
+**Usage:**
+
+```astro {7}
+---
+import { Breadcrumbs } from "astro-breadcrumbs";
+---
+
+<Breadcrumbs>
   <svg
-    slot="index"
-    aria-label="Home Page"
+    slot="separator"
     xmlns="http://www.w3.org/2000/svg"
     width="24"
     height="24"
@@ -108,8 +139,27 @@ import { Breadcrumbs } from "astro-breadcrumbs";
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-    ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
-    </path><polyline points="9 22 9 12 15 12 15 22"></polyline>
+    ><polyline points="9 18 15 12 9 6"></polyline>
   </svg>
+</Breadcrumbs>
+```
+
+**Rendered Component:**
 
-</Breadcrumbs>
\ No newline at end of file
+<Breadcrumbs>
+<svg
+  slot="separator"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="9 18 15 12 9 6"></polyline>
+</svg>
+
+</Breadcrumbs>
diff --git a/docs/src/content/docs/guides/example.md b/docs/src/content/docs/guides/example.md
deleted file mode 100644
index ebd0f3b..0000000
--- a/docs/src/content/docs/guides/example.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Example Guide
-description: A guide in my new Starlight docs site.
----
-
-Guides lead a user through a specific task they want to accomplish, often with a sequence of steps.
-Writing a good guide requires thinking about what your users are trying to do.
-
-## Further reading
-
-- Read [about how-to guides](https://diataxis.fr/how-to-guides/) in the Diátaxis framework
diff --git a/docs/src/content/docs/reference/example.md b/docs/src/content/docs/reference/example.md
deleted file mode 100644
index ac8cfa8..0000000
--- a/docs/src/content/docs/reference/example.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Example Reference
-description: A reference page in my new Starlight docs site.
----
-
-Reference pages are ideal for outlining how things work in terse and clear terms.
-Less concerned with telling a story or addressing a specific use case, they should give a comprehensive outline of what your documenting.
-
-## Further reading
-
-- Read [about reference](https://diataxis.fr/reference/) in the Diátaxis framework
diff --git a/docs/src/content/docs/start-here/demo.mdx b/docs/src/content/docs/start-here/demo.mdx
index 8266bc0..0d310bf 100644
--- a/docs/src/content/docs/start-here/demo.mdx
+++ b/docs/src/content/docs/start-here/demo.mdx
@@ -42,3 +42,8 @@ import { Breadcrumbs } from "astro-breadcrumbs";
 
   </Breadcrumbs>
 </div>
+
+## Astro-Breadcrumbs on production ready sites
+
+- [Berliner Schnauze](https://berliner-schnauze.wtf/wort/knorke/)
+- [Shaping Digital Transformation for a Sustainable Society](https://publication2023.bits-und-baeume.org/)
diff --git a/docs/src/content/docs/start-here/getting-started.mdx b/docs/src/content/docs/start-here/getting-started.mdx
index 94d8067..002c037 100644
--- a/docs/src/content/docs/start-here/getting-started.mdx
+++ b/docs/src/content/docs/start-here/getting-started.mdx
@@ -37,6 +37,11 @@ import { Tabs, TabItem } from "@astrojs/starlight/components";
 ---
 import { Breadcrumbs } from "astro-breadcrumbs";
 
-import 'astro-breadcrumbs/breadcrumbs.css';
+import "astro-breadcrumbs/breadcrumbs.css";
+
+// or import the scss file
+// import "astro-breadcrumbs/breadcrumbs.scss";
 ---
+
+<Breadcrumbs />
 ```
diff --git a/docs/src/content/docs/styling/css-api.mdx b/docs/src/content/docs/styling/css-api.mdx
index 84f510f..0f98685 100644
--- a/docs/src/content/docs/styling/css-api.mdx
+++ b/docs/src/content/docs/styling/css-api.mdx
@@ -9,19 +9,19 @@ The CSS File is the compiled version of the SCSS file, using there SCSS default
 
 ## --color-link-breadcrumbs
 
-**Default:** `$color-link` default value [@see](/en/scss-api#color-link)
+**Default:** `$color-link` default value [@see](/styling/scss-api#color-link)
 
 Defines the color rule for `c-breadcrumbs__link`.
 
 ## --size-font-breadcrumbs
 
-**Default:** `$size-font` default value [@see](/en/scss-api#size-font)
+**Default:** `$size-font` default value [@see](/styling/scss-api#size-font)
 
 Sets the font size of the breadcrumbs.
 
 ## --spacing-vertical-separator-breadcrumbs
 
-**Default:** `$spacing-vertical-separator` default value [@see](/en/scss-api#spacing-vertical-separator)
+**Default:** `$spacing-vertical-separator` default value [@see](/styling/scss-api#spacing-vertical-separator)
 
 Controles the vertical spacing of the separator.
 
@@ -29,6 +29,6 @@ Controles the vertical spacing of the separator.
 
 ```astro
 ---
-import 'astro-breadcrumbs/breadcrumbs.css';
+import "astro-breadcrumbs/breadcrumbs.css";
 ---
-```
\ No newline at end of file
+```
diff --git a/docs/src/content/docs/styling/scss-api.mdx b/docs/src/content/docs/styling/scss-api.mdx
index 14b890d..6e4e032 100644
--- a/docs/src/content/docs/styling/scss-api.mdx
+++ b/docs/src/content/docs/styling/scss-api.mdx
@@ -206,3 +206,21 @@ Sets the transition for the link color. If `$color-hover-link` is not set, this
   $transition-link-breadcrumbs: all 0.3s ease
 );
 ```
+
+## $truncated
+
+**Default:** `false`
+
+If `true`, truncated styles will be applied to the breadcrumbs.
+
+:::caution
+Make sure to also set `truncated` property to `true` in the [configuration](/configuration/properties/#truncated).
+:::
+
+**Usage:**
+
+```scss
+@use "astro-breadcrumbs/breadcrumbs.scss" with (
+  $truncated: true
+);
+```
diff --git a/docs/src/content/docs/styling/setup-scss-config.mdx b/docs/src/content/docs/styling/setup-scss-config.mdx
index ad5717f..5bb0310 100644
--- a/docs/src/content/docs/styling/setup-scss-config.mdx
+++ b/docs/src/content/docs/styling/setup-scss-config.mdx
@@ -41,16 +41,21 @@ If already present this is optional.
 
 ### 2. Create a new SCSS file
 
-Create a new SCSS file (for example styles.scss) in your project and import the `astro-breadcrumbs` SCSS file. You can then use the SCSS variables to customize the look of the breadcrumbs.
+Create a new SCSS file (for example astro-breadcrumbs-config.scss) in your project and import the `astro-breadcrumbs` SCSS file. You can then use the SCSS variables to customize the look of your breadcrumbs.
 
 ```scss
-@use "astro-breadcrumbs/breadcrumbs.scss" with (/// Your config here);
+// astro-breadcrumbs-config.scss
+@use "astro-breadcrumbs/breadcrumbs.scss" with (
+  /// Your config goes here
+  /// $size-font: 12px;
+  /// $color-link: rebeccapurple;
+);
 ```
 
 ### 3. Import the SCSS file in your Astro file
 
 ```astro
 ---
-import "../styles/styles.scss";
+import "../styles/astro-breadcrumbs-config.scss";
 ---
 ```
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cb42161..83846a2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,11 +40,11 @@ importers:
   demo:
     dependencies:
       '@astrojs/mdx':
-        specifier: ^2.1.0
-        version: 2.1.0(astro@4.2.6)
+        specifier: ^2.1.1
+        version: 2.1.1(astro@4.3.0)
       astro:
-        specifier: ^4.2.6
-        version: 4.2.6(sass@1.70.0)
+        specifier: ^4.3.0
+        version: 4.3.0(sass@1.70.0)
     devDependencies:
       sass:
         specifier: ^1.70.0
@@ -53,20 +53,23 @@ importers:
   docs:
     dependencies:
       '@astrojs/starlight':
-        specifier: ^0.17.0
-        version: 0.17.0(astro@4.2.6)
+        specifier: ^0.17.2
+        version: 0.17.2(astro@4.3.0)
       astro:
-        specifier: ^4.2.6
-        version: 4.2.6(sass@1.70.0)
+        specifier: ^4.3.0
+        version: 4.3.0(sass@1.70.0)
       astro-breadcrumbs:
         specifier: ^1.9.0
         version: link:..
       astro-matomo:
         specifier: ^1.4.2
-        version: 1.4.2(astro@4.2.6)
+        version: 1.4.2(astro@4.3.0)
       sharp:
         specifier: ^0.33.2
         version: 0.33.2
+      starlight-links-validator:
+        specifier: ^0.5.2
+        version: 0.5.2(@astrojs/starlight@0.17.2)(astro@4.3.0)
     devDependencies:
       sass:
         specifier: ^1.70.0
@@ -130,8 +133,8 @@ packages:
       - supports-color
     dev: false
 
-  /@astrojs/markdown-remark@4.2.0:
-    resolution: {integrity: sha512-qQB+LoxmIqzkhLXaQAzfzlBxZU1jeQYailsifurz89WeY0Q8ywIj8uQQSyqxb7rPPg3ZfdNdxsN9lF5UaCRn0w==}
+  /@astrojs/markdown-remark@4.2.1:
+    resolution: {integrity: sha512-2RQBIwrq+2qPYtp99bH+eL5hfbK0BoxXla85lHsRpIX/IsGqFrPX6pXI2cbWPihBwGbKCdxS6uZNX2QerZWwpQ==}
     dependencies:
       '@astrojs/prism': 3.0.0
       github-slugger: 2.0.0
@@ -151,16 +154,16 @@ packages:
       - supports-color
     dev: false
 
-  /@astrojs/mdx@2.1.0(astro@4.2.6):
-    resolution: {integrity: sha512-QIH2BLYWz2/QVChE4W7Z8a2SOhDmMDvL89rOoZkZ8CnSneu03+VvUse1K8ObrC877SPSct9cNWe55K05vgQ+VQ==}
+  /@astrojs/mdx@2.1.1(astro@4.3.0):
+    resolution: {integrity: sha512-AgGFdE7HOGmoFooGvMSatkA9FiSKwyVW7ImHot/bXJ6uAbFfu6iG2ht18Cf1pT22Hda/6iSCGWusFvBv0/EnKQ==}
     engines: {node: '>=18.14.1'}
     peerDependencies:
       astro: ^4.0.0
     dependencies:
-      '@astrojs/markdown-remark': 4.2.0
+      '@astrojs/markdown-remark': 4.2.1
       '@mdx-js/mdx': 3.0.0
-      acorn: 8.11.2
-      astro: 4.2.6(sass@1.70.0)
+      acorn: 8.11.3
+      astro: 4.3.0(sass@1.70.0)
       es-module-lexer: 1.4.1
       estree-util-visit: 2.0.0
       github-slugger: 2.0.0
@@ -191,18 +194,18 @@ packages:
       zod: 3.22.4
     dev: false
 
-  /@astrojs/starlight@0.17.0(astro@4.2.6):
-    resolution: {integrity: sha512-a2s+x/5r0v7S5jERC91IuEqV+PXDUlFNVDJPrcbpjx0xaqvg4TezL1K3gWCptfHO1mUE9ikQ8vaArbNbgFVb/g==}
+  /@astrojs/starlight@0.17.2(astro@4.3.0):
+    resolution: {integrity: sha512-2Zme8DobPaocbALX6LqkR8thDxa0RK3qikNccvwzowuYjGMzGvldt524RimFaVB0zTNrtrw2Sp1jamF1KJae8w==}
     peerDependencies:
       astro: ^4.0.0
     dependencies:
-      '@astrojs/mdx': 2.1.0(astro@4.2.6)
+      '@astrojs/mdx': 2.1.1(astro@4.3.0)
       '@astrojs/sitemap': 3.0.5
       '@pagefind/default-ui': 1.0.3
       '@types/hast': 3.0.3
       '@types/mdast': 4.0.3
-      astro: 4.2.6(sass@1.70.0)
-      astro-expressive-code: 0.32.2(astro@4.2.6)
+      astro: 4.3.0(sass@1.70.0)
+      astro-expressive-code: 0.32.2(astro@4.3.0)
       bcp-47: 2.1.0
       hast-util-select: 6.0.2
       hastscript: 8.0.0
@@ -420,7 +423,6 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.23.9
-    dev: true
 
   /@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.23.5):
     resolution: {integrity: sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==}
@@ -465,8 +467,8 @@ packages:
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.23.5
-      '@babel/types': 7.23.5
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
       debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
@@ -498,7 +500,6 @@ packages:
       '@babel/helper-string-parser': 7.23.4
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
-    dev: true
 
   /@bcoe/v8-coverage@0.2.3:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
@@ -1607,12 +1608,12 @@ packages:
       through: 2.3.8
     dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.11.2):
+  /acorn-jsx@5.3.2(acorn@8.11.3):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      acorn: 8.11.2
+      acorn: 8.11.3
     dev: false
 
   /acorn-walk@8.3.2:
@@ -1629,7 +1630,6 @@ packages:
     resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /agent-base@7.1.0:
     resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==}
@@ -1760,22 +1760,22 @@ packages:
     hasBin: true
     dev: false
 
-  /astro-expressive-code@0.32.2(astro@4.2.6):
+  /astro-expressive-code@0.32.2(astro@4.3.0):
     resolution: {integrity: sha512-uJbgSCl9F9NGjdfTmBHci5Ws0/zMUNk9dWfOl6rvYaOL6NZha+NNjnmB3Aza7GnxP+NvQt3RV8M2vpcZnaudSw==}
     peerDependencies:
       astro: ^3.3.0 || ^4.0.0-beta
     dependencies:
-      astro: 4.2.6(sass@1.70.0)
+      astro: 4.3.0(sass@1.70.0)
       hast-util-to-html: 8.0.4
       remark-expressive-code: 0.32.2
     dev: false
 
-  /astro-matomo@1.4.2(astro@4.2.6):
+  /astro-matomo@1.4.2(astro@4.3.0):
     resolution: {integrity: sha512-65TtRKaNmGWSAaPAV84dTweOt/6aVMaPLQxJkkiSWdDFr8oScf3Sg0zzs+tE5Ca+VZdLT8QLZgdrcVJG4uX2KA==}
     peerDependencies:
       astro: ^2.0.0-beta.0 || ^3.0.0 || ^4.0.0
     dependencies:
-      astro: 4.2.6(sass@1.70.0)
+      astro: 4.3.0(sass@1.70.0)
     dev: false
 
   /astro@4.0.2:
@@ -1858,23 +1858,23 @@ packages:
       - typescript
     dev: false
 
-  /astro@4.2.6(sass@1.70.0):
-    resolution: {integrity: sha512-k5i8pEI2r45JTkoE0I4JyhOH/dZFpjUA4AONbRd9Gr1LtnGOhKHDftiYOrRLUGx91q7BzoW3DOk+h4yZM4yC3g==}
+  /astro@4.3.0(sass@1.70.0):
+    resolution: {integrity: sha512-DSn7q7KJ9lmA7B3faz6uaIIRTzJduKNYRAsgXDn+wH1Jso33PFOU3ZcI4knlMAqhFW3MX8WorB8Hg6kR+waQXg==}
     engines: {node: '>=18.14.1', npm: '>=6.14.0'}
     hasBin: true
     dependencies:
       '@astrojs/compiler': 2.5.1
       '@astrojs/internal-helpers': 0.2.1
-      '@astrojs/markdown-remark': 4.2.0
+      '@astrojs/markdown-remark': 4.2.1
       '@astrojs/telemetry': 3.0.4
       '@babel/core': 7.23.5
       '@babel/generator': 7.23.5
-      '@babel/parser': 7.23.5
+      '@babel/parser': 7.23.9
       '@babel/plugin-transform-react-jsx': 7.22.5(@babel/core@7.23.5)
       '@babel/traverse': 7.23.5
-      '@babel/types': 7.23.5
+      '@babel/types': 7.23.9
       '@types/babel__core': 7.20.5
-      acorn: 8.11.2
+      acorn: 8.11.3
       aria-query: 5.3.0
       axobject-query: 4.0.0
       boxen: 7.1.1
@@ -1902,7 +1902,7 @@ packages:
       http-cache-semantics: 4.1.1
       js-yaml: 4.1.0
       kleur: 4.1.5
-      magic-string: 0.30.3
+      magic-string: 0.30.5
       mdast-util-to-hast: 13.0.2
       mime: 3.0.0
       ora: 7.0.1
@@ -3911,7 +3911,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /magicast@0.3.3:
     resolution: {integrity: sha512-ZbrP1Qxnpoes8sz47AM0z08U+jW6TyRgZzcWy3Ma3vDhJttwMwAFDMMQFobwdBxByBD46JYmxRzeF7w2+wJEuw==}
@@ -4343,8 +4342,8 @@ packages:
   /micromark-extension-mdxjs@3.0.0:
     resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==}
     dependencies:
-      acorn: 8.11.2
-      acorn-jsx: 5.3.2(acorn@8.11.2)
+      acorn: 8.11.3
+      acorn-jsx: 5.3.2(acorn@8.11.3)
       micromark-extension-mdx-expression: 3.0.0
       micromark-extension-mdx-jsx: 3.0.0
       micromark-extension-mdx-md: 2.0.0
@@ -5935,6 +5934,23 @@ packages:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
     dev: true
 
+  /starlight-links-validator@0.5.2(@astrojs/starlight@0.17.2)(astro@4.3.0):
+    resolution: {integrity: sha512-0zI4QdbuGmguzJl/3ToMwWlbjVa/6BGthMYi68eQcd7ujqa3EUeIwCtUa+ZzG4YcjzIr+uFBfAphQGspj3XPLg==}
+    engines: {node: '>=18.14.1'}
+    peerDependencies:
+      '@astrojs/starlight': '>=0.15.0'
+      astro: '>=4.0.0'
+    dependencies:
+      '@astrojs/starlight': 0.17.2(astro@4.3.0)
+      astro: 4.3.0(sass@1.70.0)
+      github-slugger: 2.0.0
+      hast-util-from-html: 2.0.1
+      hast-util-has-property: 3.0.0
+      kleur: 4.1.5
+      mdast-util-to-string: 4.0.0
+      unist-util-visit: 5.0.0
+    dev: false
+
   /std-env@3.7.0:
     resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
     dev: true
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index e8c3db9..2c026f4 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +1,5 @@
 packages:
   - "demo"
   - "docs"
+  - package
+  - "packages/*"
diff --git a/src/Breadcrumbs.astro b/src/Breadcrumbs.astro
index 2e9ab5c..212a7bb 100644
--- a/src/Breadcrumbs.astro
+++ b/src/Breadcrumbs.astro
@@ -10,6 +10,8 @@ export interface BreadcrumbsProps {
   schemaJsonScript?: boolean;
   baseUrl?: string;
   trailingSlash?: boolean;
+  ellipsisAriaLabel?: string;
+  truncated?: boolean;
 }
 
 export interface BreadcrumbItem {
@@ -26,11 +28,14 @@ const {
   schemaJsonScript = true,
   baseUrl,
   trailingSlash = false,
+  ellipsisAriaLabel = "Show hidden navigation",
+  truncated = false,
 } = Astro.props as BreadcrumbsProps;
 
 const hasBaseUrl = !!baseUrl?.length;
 const paths = Astro.url.pathname.split("/").filter((crumb: any) => crumb);
-console.log(paths);
+const pathLength = paths?.length;
+const UUID = crypto.randomUUID();
 
 const parts = generateCrumbs(
   baseUrl,
@@ -42,46 +47,75 @@ const parts = generateCrumbs(
 );
 ---
 
-<nav aria-label={ariaLabel} class={mainBemClass}>
-  <ol
-    class={`${mainBemClass}__crumbs${
-      Astro.slots.has("separator") ? " has-separators" : " has-no-separators"
-    }`}
-  >
-    {
-      parts.map(({ text, ...attrs }, index, array) => (
-        <li class={`${mainBemClass}__crumb`}>
-          {Astro.slots.has("index") && index === 0 && (
-            <a {...attrs} class={`${mainBemClass}__link is-index`}>
-              <slot name="index" />
-            </a>
-          )}
+<astro-breadcrumbs
+  data-main-bem-class={mainBemClass}
+  data-id={UUID}
+  data-path-length={pathLength}
+  data-truncated={truncated}
+>
+  <nav aria-label={ariaLabel} class={mainBemClass} id={UUID}>
+    <ol
+      class={`${mainBemClass}__crumbs${
+        Astro.slots.has("separator") ? " has-separators" : " has-no-separators"
+      }`}
+    >
+      {
+        parts.map(({ text, ...attrs }, index, array) => (
+          <>
+            {index === 1 && pathLength > 1 && truncated && (
+              <li class={`${mainBemClass}__crumb has-ellipsis`}>
+                <button
+                  type="button"
+                  aria-label={ellipsisAriaLabel}
+                  class={`${mainBemClass}__truncated-button`}
+                >
+                  <slot name="ellipsis">…</slot>
+                </button>
+                <span class="c-breadcrumbs__separator" aria-hidden="true">
+                  <slot name="separator" />
+                </span>
+              </li>
+            )}
+            <li class={`${mainBemClass}__crumb`}>
+              {Astro.slots.has("index") && index === 0 && (
+                <a {...attrs} class={`${mainBemClass}__link is-index`}>
+                  <slot name="index" />
+                </a>
+              )}
 
-          {(!Astro.slots.has("index") ||
-            (Astro.slots.has("index") && index !== 0)) && (
-            <a
-              {...attrs}
-              class={`${mainBemClass}__link${
-                index + 1 === array.length ? " is-current" : ""
-              }`}
-              aria-current={index + 1 === array.length ? "location" : false}
-            >
-              {text}
-            </a>
-          )}
+              {(!Astro.slots.has("index") ||
+                (Astro.slots.has("index") && index !== 0)) && (
+                <a
+                  {...attrs}
+                  class={`${mainBemClass}__link${
+                    index + 1 === array.length ? " is-current" : ""
+                  }`}
+                  aria-current={index + 1 === array.length ? "location" : false}
+                >
+                  {text}
+                </a>
+              )}
 
-          {Astro.slots.has("separator") && array.length - 1 !== index && (
-            <span class="c-breadcrumbs__separator" aria-hidden="true">
-              <slot name="separator" />
-            </span>
-          )}
-        </li>
-      ))
-    }
-  </ol>
-</nav>
+              {Astro.slots.has("separator") && array.length - 1 !== index && (
+                <span class="c-breadcrumbs__separator" aria-hidden="true">
+                  <slot name="separator" />
+                </span>
+              )}
+            </li>
+          </>
+        ))
+      }
+    </ol>
+  </nav>
+</astro-breadcrumbs>
 {
   schemaJsonScript && (
     <script type="application/ld+json" set:html={schemaJson(parts)} />
   )
 }
+
+<script>
+  import { Truncated } from "./lib/truncated";
+
+  customElements.define("astro-breadcrumbs", Truncated);
+</script>
diff --git a/src/breadcrumbs-dist.scss b/src/breadcrumbs-dist.scss
index f30fd44..748de78 100644
--- a/src/breadcrumbs-dist.scss
+++ b/src/breadcrumbs-dist.scss
@@ -1 +1 @@
-@use 'breadcrumbs.scss';
\ No newline at end of file
+@use "breadcrumbs.scss" with($truncated: true);
diff --git a/src/breadcrumbs.css b/src/breadcrumbs.css
index 4cabfd6..a0e159f 100644
--- a/src/breadcrumbs.css
+++ b/src/breadcrumbs.css
@@ -3,6 +3,28 @@
   --size-font-breadcrumbs: 1rem;
   --spacing-vertical-separator-breadcrumbs: 6px;
 }
+.c-breadcrumbs .has-ellipsis {
+  display: var(--display-ellipsis-breadcrumbs, none);
+}
+.c-breadcrumbs.is-truncated .has-ellipsis {
+  --display-ellipsis-breadcrumbs: flex;
+}
+.c-breadcrumbs.is-truncated .c-breadcrumbs__crumb {
+  visibility: var(--visibility-truncated-breadcrumbs, hidden);
+  position: var(--position-truncated-breadcrumbs, absolute);
+}
+.c-breadcrumbs.is-truncated .c-breadcrumbs__crumb:first-of-type, .c-breadcrumbs.is-truncated .c-breadcrumbs__crumb:last-of-type, .c-breadcrumbs.is-truncated .c-breadcrumbs__crumb.has-ellipsis {
+  --visibility-truncated-breadcrumbs: visible;
+  --position-truncated-breadcrumbs: relative;
+}
+.c-breadcrumbs__truncated-button {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  line-height: 1;
+}
 .c-breadcrumbs__crumbs {
   list-style-type: none;
   margin: 0;
diff --git a/src/breadcrumbs.css.map b/src/breadcrumbs.css.map
index 51f72f3..a46c389 100644
--- a/src/breadcrumbs.css.map
+++ b/src/breadcrumbs.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["breadcrumbs.scss"],"names":[],"mappings":"AAaA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EAIE;;AAGF;EACE;EAGE,YA/B2B;;AAoCjC;EACE;EACA;;AAUE;EACE;EACA;EACA;EACA;;AAUF;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA","file":"breadcrumbs.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["breadcrumbs.scss"],"names":[],"mappings":"AAsBA;EACE;EACA;EACA;;AAGE;EACE;;AAIA;EACE;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EAGE;;AAGF;EACE;EAGE,YAtE2B;;AA2EjC;EACE;EACA;;AASE;EACE;EACA;EACA;EACA;;AASF;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA","file":"breadcrumbs.css"}
\ No newline at end of file
diff --git a/src/breadcrumbs.scss b/src/breadcrumbs.scss
index 003a551..9980dbf 100644
--- a/src/breadcrumbs.scss
+++ b/src/breadcrumbs.scss
@@ -1,7 +1,7 @@
-@use 'sass:list';
+@use "sass:list";
 
-$bem-root: 'c-breadcrumbs' !default;
-$overflow-behavior: 'wrap' !default;
+$bem-root: "c-breadcrumbs" !default;
+$overflow-behavior: "wrap" !default;
 $overflow-wrap-horizontal-spacing: 1rem !default;
 $color-link: inherit !default;
 $color-hover-link: null !default;
@@ -12,11 +12,9 @@ $size-font: 1rem !default;
 $spacing-vertical-separator: 6px !default;
 $icons-not-bigger-than-font-size: true !default;
 $transition-link-breadcrumbs: color 0.2s ease-in-out !default;
+$truncated: false !default;
 
-$valid-overflow-behaviors: (
-  'wrap',
-  'ellipsis'
-);
+$valid-overflow-behaviors: ("wrap", "ellipsis");
 
 @if not list.index($valid-overflow-behaviors, $overflow-behavior) {
   @error '❌  ===> #{$overflow-behavior} is not a valid option for $overflow-behavior. Please use: #{$valid-overflow-behaviors}';
@@ -27,21 +25,53 @@ $valid-overflow-behaviors: (
   --size-font-breadcrumbs: #{$size-font};
   --spacing-vertical-separator-breadcrumbs: #{$spacing-vertical-separator};
 
+  @if $truncated {
+    .has-ellipsis {
+      display: var(--display-ellipsis-breadcrumbs, none);
+    }
+
+    &.is-truncated {
+      .has-ellipsis {
+        --display-ellipsis-breadcrumbs: flex;
+      }
+
+      .#{$bem-root}__crumb {
+        visibility: var(--visibility-truncated-breadcrumbs, hidden);
+        position: var(--position-truncated-breadcrumbs, absolute);
+
+        &:first-of-type,
+        &:last-of-type,
+        &.has-ellipsis {
+          --visibility-truncated-breadcrumbs: visible;
+          --position-truncated-breadcrumbs: relative;
+        }
+      }
+    }
+
+    &__truncated-button {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
+      line-height: 1;
+    }
+  }
+
   &__crumbs {
     list-style-type: none;
     margin: 0;
     padding: 0;
     display: flex;
 
-
-    @if $overflow-behavior =='wrap' {
+    @if $overflow-behavior == "wrap" {
       flex-wrap: wrap;
     }
 
     &:where(.has-no-separators) {
       row-gap: var(--spacing-vertical-separator-breadcrumbs);
 
-      @if $overflow-behavior =='wrap' {
+      @if $overflow-behavior == "wrap" {
         column-gap: $overflow-wrap-horizontal-spacing;
       }
     }
@@ -51,14 +81,13 @@ $valid-overflow-behaviors: (
     display: flex;
     align-items: center;
 
-    @if $overflow-behavior == 'ellipsis' {
+    @if $overflow-behavior == "ellipsis" {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     }
 
     &:has(.#{$bem-root}__separator) {
-
       .#{$bem-root}__separator {
         display: flex;
         align-items: center;
@@ -72,7 +101,6 @@ $valid-overflow-behaviors: (
     }
 
     @if $icons-not-bigger-than-font-size {
-
       &:has(svg, image) :where(svg, image) {
         max-width: var(--size-font-breadcrumbs);
         max-height: var(--size-font-breadcrumbs);
@@ -87,11 +115,9 @@ $valid-overflow-behaviors: (
     line-height: 1;
 
     @if $color-hover-link {
-
       transition: $transition-link-breadcrumbs;
 
       @media (hover: hover) {
-
         &:hover {
           --color-link-breadcrumbs: #{$color-hover-link};
         }
@@ -99,17 +125,15 @@ $valid-overflow-behaviors: (
     }
 
     @if $color-is-current {
-
       &:where(.is-current) {
         --color-link-breadcrumbs: #{$color-is-current};
       }
     }
 
     @if $color-is-index {
-
       &:where(.is-index) {
         --color-link-breadcrumbs: #{$color-is-index};
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/truncated.ts b/src/lib/truncated.ts
new file mode 100644
index 0000000..c66c469
--- /dev/null
+++ b/src/lib/truncated.ts
@@ -0,0 +1,87 @@
+export class Truncated extends HTMLElement {
+  isManualToggle = false;
+  breadcrumbs: HTMLElement | null = null;
+  mainBemClass: string | null = null;
+  totalWidth = 0;
+
+  constructor() {
+    super();
+
+    this.mainBemClass = this.dataset.mainBemClass || null;
+    const id = this.dataset.id;
+
+    if (!("truncated" in this.dataset)) return;
+    if (!id) return;
+
+    // Select the breadcrumbs element
+    this.breadcrumbs = document.getElementById(id);
+
+    // Select all the crumb elements
+    const crumbs = this.breadcrumbs?.querySelectorAll(
+      `.${this.mainBemClass}__crumb`,
+    );
+
+    // Calculate the total width of the crumb elements
+    crumbs?.forEach((crumb) => {
+      this.totalWidth += (crumb as HTMLElement).offsetWidth;
+    });
+
+    // Create a new ResizeObserver instance
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        // Check if the breadcrumbs are overflowing
+        this.checkOverflow(entry.target.clientWidth);
+      }
+    });
+
+    // Start observing the breadcrumbs element
+    if (this.breadcrumbs) resizeObserver.observe(this.breadcrumbs);
+  }
+
+  connectedCallback() {
+    this.showHiddenCrumbs();
+  }
+
+  /**
+   * Toggle the visibility of the truncated crumb
+   *
+   * @param isTruncated
+   */
+  toggleTruncated(isTruncated: boolean) {
+    if (isTruncated) {
+      this.breadcrumbs?.classList.add("is-truncated");
+    } else {
+      this.breadcrumbs?.classList.remove("is-truncated");
+    }
+  }
+
+  /**
+   * Show the hidden crumbs when the truncated button is clicked
+   */
+  showHiddenCrumbs() {
+    const truncatedButton = this.breadcrumbs?.querySelector(
+      `.${this.mainBemClass}__truncated-button`,
+    );
+
+    truncatedButton?.addEventListener("click", () => {
+      this.breadcrumbs?.classList.remove("is-truncated");
+      this.isManualToggle = true;
+    });
+  }
+
+  /**
+   * Check if the breadcrumbs are overflowing
+   *
+   * @param   {number}  clientWidth
+   *
+   * @return  {void}
+   */
+  checkOverflow(clientWidth: number): void {
+    if (this.totalWidth > clientWidth && !this.isManualToggle) {
+      this.toggleTruncated(true);
+    } else {
+      this.toggleTruncated(false);
+      this.isManualToggle = false;
+    }
+  }
+}
diff --git a/tests/unit/truncated.test.ts b/tests/unit/truncated.test.ts
new file mode 100644
index 0000000..b3fa42d
--- /dev/null
+++ b/tests/unit/truncated.test.ts
@@ -0,0 +1,60 @@
+import { Truncated } from "../../src/lib/truncated.ts";
+import { test, beforeEach, vi } from "vitest";
+import { JSDOM } from "jsdom";
+
+let instance: Truncated;
+let callback: any;
+
+beforeEach(() => {
+  const dom = new JSDOM();
+  global.document = dom.window.document;
+  global.customElements = dom.window.customElements;
+  global.HTMLElement = dom.window.HTMLElement;
+  global.ResizeObserver = class {
+    constructor(cb: any) {
+      callback = cb;
+    }
+    observe(entry: any) {
+      callback([entry]);
+    }
+    unobserve() {}
+    disconnect() {}
+  };
+
+  // Define the Truncated custom element
+  class Truncated extends HTMLElement {
+    constructor() {
+      super();
+      // Your custom element's constructor logic here
+    }
+  }
+
+  // Register the Truncated custom element
+  global.customElements.define("x-truncated", Truncated);
+
+  instance = new Truncated();
+  instance.toggleTruncated = vi.fn();
+});
+
+test("triggers toggleTruncated with true when overflowing", () => {
+  const entry = { target: { clientWidth: 100 } };
+
+  // Create a new ResizeObserver and observe the entry
+  const resizeObserver = new global.ResizeObserver((entries) => {
+    // Call instance.toggleTruncated inside the callback
+    if (entries[0].target.clientWidth < 200) {
+      instance.toggleTruncated(true);
+    }
+  });
+
+  resizeObserver.observe(entry);
+
+  // Simulate a change in the entry's size
+  entry.target.clientWidth = 50;
+
+  // Call the callback with the updated entry
+  callback([entry]);
+
+  // Check that instance.toggleTruncated was called with the argument [true]
+  expect(instance.toggleTruncated).toHaveBeenCalledWith(true);
+});
diff --git a/vitest.config.ts b/vitest.config.ts
index d8bb174..44fb391 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -8,9 +8,7 @@ export default defineConfig({
     globals: true,
     environment: "jsdom",
     coverage: {
-      include: [
-        "./tests/unit/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}",
-      ],
+      include: ["src/**"],
       reportsDirectory: "./tests/unit/coverage",
     },
   },