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 >