diff --git a/packages/html/src/filemanager/tests/filemanager-contextmenu.tsx b/packages/html/src/filemanager/tests/filemanager-contextmenu.tsx
index 4086faeff36..185fb72cfbe 100644
--- a/packages/html/src/filemanager/tests/filemanager-contextmenu.tsx
+++ b/packages/html/src/filemanager/tests/filemanager-contextmenu.tsx
@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
 import { Button } from '../../button';
 import { Icon } from '../../icon';
 import { MenuItem, MenuList } from '../../menu';
@@ -45,15 +46,15 @@ root.render(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <nav className="k-filemanager-breadcrumb k-widget k-breadcrumb">
-                            <ol className="k-breadcrumb-container">
-                                <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                                    <a className="k-breadcrumb-root-link  k-breadcrumb-icon-link">
+                        <Breadcrumb className="k-filemanager-breadcrumb">
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
                                         <Icon name="home" />
-                                    </a>
-                                </li>
-                            </ol>
-                        </nav>
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </Breadcrumb>
 
                         {/* View */}
                         <div className="k-widget k-listview k-selectable k-filemanager-listview">
diff --git a/packages/html/src/filemanager/tests/filemanager-drag-hint.tsx b/packages/html/src/filemanager/tests/filemanager-drag-hint.tsx
index 4a835e8b355..e5496cb868d 100644
--- a/packages/html/src/filemanager/tests/filemanager-drag-hint.tsx
+++ b/packages/html/src/filemanager/tests/filemanager-drag-hint.tsx
@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
 import { Button } from '../../button';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
@@ -42,15 +43,15 @@ root.render(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <nav className="k-filemanager-breadcrumb k-widget k-breadcrumb">
-                            <ol className="k-breadcrumb-container">
-                                <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                                    <a className="k-breadcrumb-root-link k-breadcrumb-icon-link">
+                        <Breadcrumb className="k-filemanager-breadcrumb">
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
                                         <Icon name="home" />
-                                    </a>
-                                </li>
-                            </ol>
-                        </nav>
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </Breadcrumb>
 
                         {/* View */}
                         <div className="k-widget k-listview k-selectable k-filemanager-listview">
diff --git a/packages/html/src/filemanager/tests/filemanager-gridview.tsx b/packages/html/src/filemanager/tests/filemanager-gridview.tsx
index 99f72e90cb8..666b7013eb2 100644
--- a/packages/html/src/filemanager/tests/filemanager-gridview.tsx
+++ b/packages/html/src/filemanager/tests/filemanager-gridview.tsx
@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
@@ -37,15 +38,15 @@ root.render(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <nav className="k-filemanager-breadcrumb k-widget k-breadcrumb">
-                            <ol className="k-breadcrumb-container">
-                                <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                                    <a className="k-breadcrumb-root-link  k-breadcrumb-icon-link">
+                        <Breadcrumb className="k-filemanager-breadcrumb">
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
                                         <Icon name="home" />
-                                    </a>
-                                </li>
-                            </ol>
-                        </nav>
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </Breadcrumb>
 
                         {/* View */}
                         <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">
@@ -155,15 +156,15 @@ root.render(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <nav className="k-filemanager-breadcrumb k-widget k-breadcrumb">
-                            <ol className="k-breadcrumb-container">
-                                <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                                    <a className="k-breadcrumb-root-link  k-breadcrumb-icon-link">
+                        <Breadcrumb className="k-filemanager-breadcrumb">
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
                                         <Icon name="home" />
-                                    </a>
-                                </li>
-                            </ol>
-                        </nav>
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </Breadcrumb>
 
                         {/* View */}
                         <div className="k-filemanager-view k-filemanager-view-grid">
diff --git a/packages/html/src/filemanager/tests/filemanager-listview.tsx b/packages/html/src/filemanager/tests/filemanager-listview.tsx
index f839e623635..110fa6ba246 100644
--- a/packages/html/src/filemanager/tests/filemanager-listview.tsx
+++ b/packages/html/src/filemanager/tests/filemanager-listview.tsx
@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
@@ -37,15 +38,15 @@ root.render(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <nav className="k-filemanager-breadcrumb k-widget k-breadcrumb">
-                            <ol className="k-breadcrumb-container">
-                                <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                                    <a className="k-breadcrumb-root-link  k-breadcrumb-icon-link">
+                        <Breadcrumb className="k-filemanager-breadcrumb">
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
                                         <Icon name="home" />
-                                    </a>
-                                </li>
-                            </ol>
-                        </nav>
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </Breadcrumb>
 
                         {/* View */}
                         <div className="k-widget k-listview k-selectable k-filemanager-listview">
@@ -97,15 +98,15 @@ root.render(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <nav className="k-filemanager-breadcrumb k-widget k-breadcrumb">
-                            <ol className="k-breadcrumb-container">
-                                <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                                    <a className="k-breadcrumb-root-link  k-breadcrumb-icon-link">
+                        <Breadcrumb className="k-filemanager-breadcrumb">
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
                                         <Icon name="home" />
-                                    </a>
-                                </li>
-                            </ol>
-                        </nav>
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </Breadcrumb>
 
                         {/* View */}
                         <div className="k-widget k-listview k-selectable k-filemanager-listview">
diff --git a/packages/html/src/filemanager/tests/filemanager-preview.tsx b/packages/html/src/filemanager/tests/filemanager-preview.tsx
index 46268b7dfad..72701f5af09 100644
--- a/packages/html/src/filemanager/tests/filemanager-preview.tsx
+++ b/packages/html/src/filemanager/tests/filemanager-preview.tsx
@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
 import { Button } from '../../button';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
@@ -32,15 +33,15 @@ root.render(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <nav className="k-filemanager-breadcrumb k-widget k-breadcrumb">
-                            <ol className="k-breadcrumb-container">
-                                <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                                    <a className="k-breadcrumb-root-link  k-breadcrumb-icon-link">
+                        <Breadcrumb className="k-filemanager-breadcrumb">
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
                                         <Icon name="home" />
-                                    </a>
-                                </li>
-                            </ol>
-                        </nav>
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </Breadcrumb>
 
                         {/* View */}
                         <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">
@@ -157,15 +158,15 @@ root.render(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <nav className="k-filemanager-breadcrumb k-widget k-breadcrumb">
-                            <ol className="k-breadcrumb-container">
-                                <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                                    <a className="k-breadcrumb-root-link  k-breadcrumb-icon-link">
+                        <Breadcrumb className="k-filemanager-breadcrumb">
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
                                         <Icon name="home" />
-                                    </a>
-                                </li>
-                            </ol>
-                        </nav>
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </Breadcrumb>
 
                         {/* View */}
                         <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">
@@ -273,15 +274,15 @@ root.render(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <nav className="k-filemanager-breadcrumb k-widget k-breadcrumb">
-                            <ol className="k-breadcrumb-container">
-                                <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                                    <a className="k-breadcrumb-root-link  k-breadcrumb-icon-link">
+                        <Breadcrumb className="k-filemanager-breadcrumb">
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
                                         <Icon name="home" />
-                                    </a>
-                                </li>
-                            </ol>
-                        </nav>
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </Breadcrumb>
 
                         {/* View */}
                         <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">