diff --git a/packages/components/breadcrumbs/breadcrumbs.ts b/packages/components/breadcrumbs/breadcrumbs.ts
index a6ffc4e2d..d539dd6a0 100644
--- a/packages/components/breadcrumbs/breadcrumbs.ts
+++ b/packages/components/breadcrumbs/breadcrumbs.ts
@@ -25,7 +25,7 @@ import { outputToObservable, takeUntilDestroyed, toObservable } from '@angular/c
 import { RouterLink } from '@angular/router';
 import { KbqButton, KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors, KbqDefaultSizes, PopUpPlacements } from '@koobiq/components/core';
-import { KbqDropdownModule } from '@koobiq/components/dropdown';
+import { KbqDropdownModule, KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqIconModule } from '@koobiq/components/icon';
 import {
     KbqOverflowItem,
@@ -209,6 +209,7 @@ export class KbqBreadcrumbs {
     protected readonly items = contentChildren<KbqBreadcrumbItem>(forwardRef(() => KbqBreadcrumbItem));
 
     private readonly breadcrumbsResult = viewChild('breadcrumbsResult', { read: ElementRef });
+    private readonly resultDropdownTrigger = viewChild('breadcrumbsResult', { read: KbqDropdownTrigger });
     private readonly result = viewChild(KbqOverflowItemsResult);
     private readonly overflowItems = viewChildren<KbqOverflowItem>(forwardRef(() => KbqOverflowItem));
     private readonly overflowItemsDir = viewChild(KbqOverflowItems);
@@ -292,6 +293,7 @@ export class KbqBreadcrumbs {
         const hideResultIfAllVisible = () => {
             if (allVisibleItems.length === items.length) {
                 result?.hide();
+                this.resultDropdownTrigger()?.close();
             }
         };
 
diff --git a/packages/components/breadcrumbs/e2e.playwright-spec.ts b/packages/components/breadcrumbs/e2e.playwright-spec.ts
index cc64a1afc..d869e83d9 100644
--- a/packages/components/breadcrumbs/e2e.playwright-spec.ts
+++ b/packages/components/breadcrumbs/e2e.playwright-spec.ts
@@ -33,6 +33,27 @@ test.describe('KbqBreadcrumbs overflow', () => {
         await expect(dropdownItems.nth(0)).toHaveText('Item #1');
         await expect(dropdownItems.nth(1)).toHaveText('Item #2');
     });
+
+    test('should hide dropdown panel when breadcrumb items fit into container', async ({ page }) => {
+        await page.goto('/E2eBreadcrumbsOverflowMax');
+
+        const dropdownPanel = () => page.locator('.kbq-dropdown__panel');
+
+        const breadcrumbs = page.getByTestId('e2eBreadcrumbsOverflow');
+        const breadcrumbsHost = page.getByTestId('e2eBreadcrumbsOverflowMaxHost');
+
+        await breadcrumbs.locator('.kbq-breadcrumb__expand').click();
+
+        await expect(dropdownPanel()).toBeVisible();
+
+        const dropdownItems = dropdownPanel().locator('[kbq-dropdown-item]');
+
+        await expect(dropdownItems).toHaveCount(2);
+
+        await breadcrumbsHost.evaluate(({ style }) => (style.width = '1000px'));
+
+        await expect(dropdownPanel()).not.toBeVisible();
+    });
 });
 
 test.describe('KbqBreadcrumbsModule', () => {
diff --git a/packages/components/breadcrumbs/e2e.ts b/packages/components/breadcrumbs/e2e.ts
index 6918b5bad..76aa6be32 100644
--- a/packages/components/breadcrumbs/e2e.ts
+++ b/packages/components/breadcrumbs/e2e.ts
@@ -144,6 +144,13 @@ export class E2eBreadcrumbsStateAndStyle {
                 <kbq-breadcrumb-item [text]="breadcrumb" [routerLink]="breadcrumb" />
             }
         </nav>
+
+        <!-- Container used for width overflow tests -->
+        <nav kbq-breadcrumbs data-testid="e2eBreadcrumbsOverflow" [max]="null">
+            @for (breadcrumb of items; track breadcrumb) {
+                <kbq-breadcrumb-item [text]="breadcrumb" [routerLink]="breadcrumb" />
+            }
+        </nav>
     `,
     styles: `
         :host {