diff --git a/docs/src/pages/components/Breadcrumb.svx b/docs/src/pages/components/Breadcrumb.svx
index 61ce50da..c236dc61 100644
--- a/docs/src/pages/components/Breadcrumb.svx
+++ b/docs/src/pages/components/Breadcrumb.svx
@@ -6,6 +6,8 @@ components: ["Breadcrumb", "BreadcrumbItem"]
import {
Breadcrumb,
BreadcrumbItem,
+ OverflowMenu,
+ OverflowMenuItem
} from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
@@ -27,6 +29,20 @@ See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs co
Profile
+### Overflow menu
+
+
+ Home
+ API documentation
+
+
+
+
+
+
+ Usage
+
+
### Skeleton
\ No newline at end of file
diff --git a/src/Breadcrumb/BreadcrumbItem.svelte b/src/Breadcrumb/BreadcrumbItem.svelte
index e421cea3..a18c7904 100644
--- a/src/Breadcrumb/BreadcrumbItem.svelte
+++ b/src/Breadcrumb/BreadcrumbItem.svelte
@@ -13,6 +13,10 @@
export let isCurrentPage = false;
import Link from "../Link/Link.svelte";
+
+ import { setContext } from "svelte";
+
+ setContext("BreadcrumbItem", {});
{
@@ -123,6 +135,11 @@
} else if (direction === "bottom") {
menuRef.style.top = height + "px";
}
+
+ if (ctxBreadcrumbItem) {
+ menuRef.style.top = height + 10 + "px";
+ menuRef.style.left = -11 + "px";
+ }
}
if (!open) {
@@ -218,6 +235,7 @@
class:bx--overflow-menu-options--light="{light}"
class:bx--overflow-menu-options--sm="{size === 'sm'}"
class:bx--overflow-menu-options--xl="{size === 'xl'}"
+ class:bx--breadcrumb-menu-options="{!!ctxBreadcrumbItem}"
class:menuOptionsClass
>