update docs

shoelace-style · Aug 5, 2024 · 5760017 · 5760017
1 parent c2e0544
commit 5760017
Showing 1 changed file with 14 additions and 16 deletions.
diff --git a/docs/pages/components/breadcrumb.md b/docs/pages/components/breadcrumb.md
@@ -199,16 +199,13 @@ 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>Our Services</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Digital Media</sl-breadcrumb-item>
   <sl-breadcrumb-item>
-    Web Design
-    <sl-dropdown slot="suffix">
+    <sl-dropdown>
       <sl-button slot="trigger" size="small" circle>
         <sl-icon label="More options" name="three-dots"></sl-icon>
       </sl-button>
@@ -219,6 +216,8 @@ Dropdown menus can be placed in a prefix or suffix slot to provide additional op
       </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>
 ```
 
@@ -236,10 +235,7 @@ import {
 const App = () => (
   <SlBreadcrumb>
     <SlBreadcrumbItem>Homepage</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Our Services</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Digital Media</SlBreadcrumbItem>
     <SlBreadcrumbItem>
-      Web Design
       <SlDropdown slot="suffix">
         <SlButton slot="trigger" size="small" circle>
           <SlIcon label="More options" name="three-dots"></SlIcon>
@@ -253,19 +249,22 @@ const App = () => (
         </SlMenu>
       </SlDropdown>
     </SlBreadcrumbItem>
+    <SlBreadcrumbItem>Our Services</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Digital Media</SlBreadcrumbItem>
   </SlBreadcrumb>
 );
 ```
 
-### With Dropdowns in default slot
-
-Dropdown menus can be placed in the default slot to provide additional options.
+Alternatively, you can place dropdown menus in a prefix or suffix slot.
 
 ```html:preview
 <sl-breadcrumb>
   <sl-breadcrumb-item>Homepage</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Our Services</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Digital Media</sl-breadcrumb-item>
   <sl-breadcrumb-item>
-    <sl-dropdown>
+    Web Design
+    <sl-dropdown slot="suffix">
       <sl-button slot="trigger" size="small" circle>
         <sl-icon label="More options" name="three-dots"></sl-icon>
       </sl-button>
@@ -276,8 +275,6 @@ Dropdown menus can be placed in the default slot to provide additional options.
       </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>
 ```
 
@@ -295,7 +292,10 @@ import {
 const App = () => (
   <SlBreadcrumb>
     <SlBreadcrumbItem>Homepage</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Our Services</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Digital Media</SlBreadcrumbItem>
     <SlBreadcrumbItem>
+      Web Design
       <SlDropdown slot="suffix">
         <SlButton slot="trigger" size="small" circle>
           <SlIcon label="More options" name="three-dots"></SlIcon>
@@ -309,8 +309,6 @@ const App = () => (
         </SlMenu>
       </SlDropdown>
     </SlBreadcrumbItem>
-    <SlBreadcrumbItem>Our Services</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Digital Media</SlBreadcrumbItem>
   </SlBreadcrumb>
 );
 ```