From 5760017ad384e97eba5b66828bbaca72a2cc5179 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 5 Aug 2024 09:23:58 -0400
Subject: [PATCH] update docs

---
 docs/pages/components/breadcrumb.md | 116 ++++++++++++++--------------
 1 file changed, 57 insertions(+), 59 deletions(-)

diff --git a/docs/pages/components/breadcrumb.md b/docs/pages/components/breadcrumb.md
index 2a3db394..6be8c96f 100644
--- a/docs/pages/components/breadcrumb.md
+++ b/docs/pages/components/breadcrumb.md
@@ -199,7 +199,63 @@ const App = () => (
 
 ### With Dropdowns
 
-Dropdown menus can be placed in a prefix or suffix slot to provide additional options.
+Dropdown menus can be placed in the default slot to provide additional options.
+
+```html:preview
+<sl-breadcrumb>
+  <sl-breadcrumb-item>Homepage</sl-breadcrumb-item>
+  <sl-breadcrumb-item>
+    <sl-dropdown>
+      <sl-button slot="trigger" size="small" circle>
+        <sl-icon label="More options" name="three-dots"></sl-icon>
+      </sl-button>
+      <sl-menu>
+        <sl-menu-item type="checkbox" checked>Web Design</sl-menu-item>
+        <sl-menu-item type="checkbox">Web Development</sl-menu-item>
+        <sl-menu-item type="checkbox">Marketing</sl-menu-item>
+      </sl-menu>
+    </sl-dropdown>
+  </sl-breadcrumb-item>
+  <sl-breadcrumb-item>Our Services</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Digital Media</sl-breadcrumb-item>
+</sl-breadcrumb>
+```
+
+```jsx:react
+import {
+  SlBreadcrumb,
+  SlBreadcrumbItem,
+  SlButton,
+  SlDropdown,
+  SlIcon,
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>Homepage</SlBreadcrumbItem>
+    <SlBreadcrumbItem>
+      <SlDropdown slot="suffix">
+        <SlButton slot="trigger" size="small" circle>
+          <SlIcon label="More options" name="three-dots"></SlIcon>
+        </SlButton>
+        <SlMenu>
+          <SlMenuItem type="checkbox" checked>
+            Web Design
+          </SlMenuItem>
+          <SlMenuItem type="checkbox">Web Development</SlMenuItem>
+          <SlMenuItem type="checkbox">Marketing</SlMenuItem>
+        </SlMenu>
+      </SlDropdown>
+    </SlBreadcrumbItem>
+    <SlBreadcrumbItem>Our Services</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Digital Media</SlBreadcrumbItem>
+  </SlBreadcrumb>
+);
+```
+
+Alternatively, you can place dropdown menus in a prefix or suffix slot.
 
 ```html:preview
 <sl-breadcrumb>
@@ -256,61 +312,3 @@ const App = () => (
   </SlBreadcrumb>
 );
 ```
-
-### With Dropdowns in default slot
-
-Dropdown menus can be placed in the default slot to provide additional options.
-
-```html:preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>Homepage</sl-breadcrumb-item>
-  <sl-breadcrumb-item>
-    <sl-dropdown>
-      <sl-button slot="trigger" size="small" circle>
-        <sl-icon label="More options" name="three-dots"></sl-icon>
-      </sl-button>
-      <sl-menu>
-        <sl-menu-item type="checkbox" checked>Web Design</sl-menu-item>
-        <sl-menu-item type="checkbox">Web Development</sl-menu-item>
-        <sl-menu-item type="checkbox">Marketing</sl-menu-item>
-      </sl-menu>
-    </sl-dropdown>
-  </sl-breadcrumb-item>
-  <sl-breadcrumb-item>Our Services</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Digital Media</sl-breadcrumb-item>
-</sl-breadcrumb>
-```
-
-```jsx:react
-import {
-  SlBreadcrumb,
-  SlBreadcrumbItem,
-  SlButton,
-  SlDropdown,
-  SlIcon,
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>Homepage</SlBreadcrumbItem>
-    <SlBreadcrumbItem>
-      <SlDropdown slot="suffix">
-        <SlButton slot="trigger" size="small" circle>
-          <SlIcon label="More options" name="three-dots"></SlIcon>
-        </SlButton>
-        <SlMenu>
-          <SlMenuItem type="checkbox" checked>
-            Web Design
-          </SlMenuItem>
-          <SlMenuItem type="checkbox">Web Development</SlMenuItem>
-          <SlMenuItem type="checkbox">Marketing</SlMenuItem>
-        </SlMenu>
-      </SlDropdown>
-    </SlBreadcrumbItem>
-    <SlBreadcrumbItem>Our Services</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Digital Media</SlBreadcrumbItem>
-  </SlBreadcrumb>
-);
-```