feat(breadcrumb): support overflow menu

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";
 </script>
@@ -27,6 +29,20 @@ See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs co
   <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
 </Breadcrumb>
 
+### Overflow menu
+
+<Breadcrumb>
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem href="/api">API documentation</BreadcrumbItem>
+  <BreadcrumbItem>
+    <OverflowMenu>
+      <OverflowMenuItem href="/api/data" text="Data" />
+      <OverflowMenuItem href="/api/data/latest" text="Latest" />
+    </OverflowMenu>
+  </BreadcrumbItem>
+  <BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
+</Breadcrumb>
+
 ### Skeleton
 
 <Breadcrumb noTrailingSlash skeleton count={3} />

src/Breadcrumb/BreadcrumbItem.svelte

@@ -13,6 +13,10 @@
   export let isCurrentPage = false;
 
   import Link from "../Link/Link.svelte";
+
+  import { setContext } from "svelte";
+
+  setContext("BreadcrumbItem", {});
 </script>
 
 <li

src/OverflowMenu/OverflowMenu.svelte

@@ -54,11 +54,19 @@
   /** Obtain a reference to the overflow menu element */
   export let menuRef = null;
 
-  import { createEventDispatcher, setContext, afterUpdate } from "svelte";
+  import {
+    createEventDispatcher,
+    getContext,
+    setContext,
+    afterUpdate,
+  } from "svelte";
   import { writable } from "svelte/store";
   import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16/OverflowMenuVertical16.svelte";
+  import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16/OverflowMenuHorizontal16.svelte";
+
   import { formatStyle } from "./formatStyle";
 
+  const ctxBreadcrumbItem = getContext("BreadcrumbItem");
   const dispatch = createEventDispatcher();
   const items = writable([]);
   const currentId = writable(undefined);
@@ -68,6 +76,10 @@
   let buttonWidth = undefined;
   let onMountAfterUpdate = true;
 
+  $: if (ctxBreadcrumbItem) {
+    icon = OverflowMenuHorizontal16;
+  }
+
   setContext("OverflowMenu", {
     focusedId,
     add: ({ id, text, primaryFocus }) => {
@@ -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
     >
       <slot />