docs(breadcrumb): move breadcrumb trail recipe

docs/src/pages/components/Breadcrumb.svx

@@ -12,8 +12,6 @@ components: ["Breadcrumb", "BreadcrumbItem"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs component.
-
 ### Default
 
 <Breadcrumb>
@@ -43,6 +41,10 @@ See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs co
   <BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
 </Breadcrumb>
 
+### Breadcrumb trail
+
+<FileSource src="/framed/Breadcrumbs/Breadcrumbs" />
+
 ### Skeleton
 
 <Breadcrumb noTrailingSlash skeleton count={3} />

docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte

@@ -1,32 +1,17 @@
 <script>
-  /**
+  import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
-   * @type {{ href?: string; text: string; }[]} [items=[]]
+
-   */
+  const items = [
-  export let items = [
     { href: "/", text: "Dashboard" },
     { href: "/reports", text: "Annual reports" },
     { href: "/reports/2019", text: "2019" },
   ];
-
-  import {
-    Row,
-    Column,
-    Breadcrumb,
-    BreadcrumbItem,
-  } from "carbon-components-svelte";
 </script>
 
-<Row>
+<Breadcrumb>
-  <Column>
+  {#each items as item, i}
-    <Breadcrumb>
+    <BreadcrumbItem href="{item.href}" isCurrentPage="{i === items.length - 1}">
-      {#each items as item, i}
+      {item.text}
-        <BreadcrumbItem
+    </BreadcrumbItem>
-          href="{item.href}"
+  {/each}
-          isCurrentPage="{i === items.length - 1}"
+</Breadcrumb>
-        >
-          {item.text}
-        </BreadcrumbItem>
-      {/each}
-    </Breadcrumb>
-  </Column>
-</Row>

docs/src/pages/recipes/Breadcrumbs.svx

@@ -1,11 +0,0 @@
----
-layout: recipe
----
-
-<script>
-  import Preview from "../../components/Preview.svelte";
-</script>
-
-## Breadcrumb trail
-
-<FileSource src="/framed/Breadcrumbs/Breadcrumbs" />