diff --git a/docs/pages/components/breadcrumb.md b/docs/pages/components/breadcrumb.md
index 9f707158..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
+
+ Homepage
+
+
+
+
+
+
+ Web Design
+ Web Development
+ Marketing
+
+
+
+ Our Services
+ Digital Media
+
+```
+
+```jsx:react
+import {
+ SlBreadcrumb,
+ SlBreadcrumbItem,
+ SlButton,
+ SlDropdown,
+ SlIcon,
+ SlMenu,
+ SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+
+ Homepage
+
+
+
+
+
+
+
+ Web Design
+
+ Web Development
+ Marketing
+
+
+
+ Our Services
+ Digital Media
+
+);
+```
+
+Alternatively, you can place dropdown menus in a prefix or suffix slot.
```html:preview
diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index acdab320..4326d210 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -15,6 +15,8 @@ New versions of Shoelace are released as-needed and generally occur when a criti
## Next
- Added ability to auto hide scroll buttons for `` when scroll button is not clickable by adding the `auto-hide-scroll-buttons` attribute. [#2128]
+- Added support for using `` in `` default slot [#2015]
+- Fixed a bug that caused errors to show in the console when components disconnect before before `firstUpdated()` executes [#2127]
## 2.16.0
diff --git a/src/components/breadcrumb-item/breadcrumb-item.component.ts b/src/components/breadcrumb-item/breadcrumb-item.component.ts
index 5c81c15b..2afbac1d 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.component.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.component.ts
@@ -2,7 +2,8 @@ import { classMap } from 'lit/directives/class-map.js';
import { HasSlotController } from '../../internal/slot.js';
import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
-import { property } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
+import { watch } from '../../internal/watch.js';
import componentStyles from '../../styles/component.styles.js';
import ShoelaceElement from '../../internal/shoelace-element.js';
import styles from './breadcrumb-item.styles.js';
@@ -31,6 +32,10 @@ export default class SlBreadcrumbItem extends ShoelaceElement {
private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');
+ @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
+ @state() private renderType: 'button' | 'link' | 'dropdown' = 'button';
+
/**
* Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
* internally. When unset, a button will be rendered instead.
@@ -43,9 +48,34 @@ export default class SlBreadcrumbItem extends ShoelaceElement {
/** The `rel` attribute to use on the link. Only used when `href` is set. */
@property() rel = 'noreferrer noopener';
- render() {
- const isLink = this.href ? true : false;
+ private setRenderType() {
+ const hasDropdown =
+ this.defaultSlot.assignedElements({ flatten: true }).filter(i => i.tagName.toLowerCase() === 'sl-dropdown')
+ .length > 0;
+ if (this.href) {
+ this.renderType = 'link';
+ return;
+ }
+
+ if (hasDropdown) {
+ this.renderType = 'dropdown';
+ return;
+ }
+
+ this.renderType = 'button';
+ }
+
+ @watch('href', { waitUntilFirstUpdate: true })
+ hrefChanged() {
+ this.setRenderType();
+ }
+
+ handleSlotChange() {
+ this.setRenderType();
+ }
+
+ render() {
return html`