@progress/kendo-themes-html 6.3.1-dev.0 → 6.4.0-dev.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (253) hide show
  1. package/dist/bottom-nav/bottom-nav-item.js +234 -0
  2. package/dist/bottom-nav/bottom-nav-item.js.map +7 -0
  3. package/dist/bottom-nav/bottom-nav.spec.js +122 -0
  4. package/dist/bottom-nav/bottom-nav.spec.js.map +7 -0
  5. package/dist/bottom-nav/tests/bottom-nav-colors.js +269 -358
  6. package/dist/bottom-nav/tests/bottom-nav-colors.js.map +4 -4
  7. package/dist/bottom-nav/tests/bottom-nav-items.js +168 -53
  8. package/dist/bottom-nav/tests/bottom-nav-items.js.map +4 -4
  9. package/dist/bottom-nav/tests/bottom-nav-rtl.js +153 -50
  10. package/dist/bottom-nav/tests/bottom-nav-rtl.js.map +4 -4
  11. package/dist/bottom-nav/tests/bottom-nav.js +167 -76
  12. package/dist/bottom-nav/tests/bottom-nav.js.map +4 -4
  13. package/dist/breadcrumb/breadcrumb-container.js +76 -0
  14. package/dist/breadcrumb/breadcrumb-container.js.map +7 -0
  15. package/dist/breadcrumb/breadcrumb-input-container.js +65 -0
  16. package/dist/breadcrumb/breadcrumb-input-container.js.map +7 -0
  17. package/dist/breadcrumb/breadcrumb-item-text.js +70 -0
  18. package/dist/breadcrumb/breadcrumb-item-text.js.map +7 -0
  19. package/dist/breadcrumb/breadcrumb-item.js +75 -0
  20. package/dist/breadcrumb/breadcrumb-item.js.map +7 -0
  21. package/dist/breadcrumb/breadcrumb-link.js +132 -0
  22. package/dist/breadcrumb/breadcrumb-link.js.map +7 -0
  23. package/dist/breadcrumb/breadcrumb-root-item-container.js +65 -0
  24. package/dist/breadcrumb/breadcrumb-root-item-container.js.map +7 -0
  25. package/dist/breadcrumb/breadcrumb.spec.js +125 -0
  26. package/dist/breadcrumb/breadcrumb.spec.js.map +7 -0
  27. package/dist/breadcrumb/tests/breadcrumb-rtl.js +349 -153
  28. package/dist/breadcrumb/tests/breadcrumb-rtl.js.map +4 -4
  29. package/dist/breadcrumb/tests/breadcrumb.js +349 -153
  30. package/dist/breadcrumb/tests/breadcrumb.js.map +4 -4
  31. package/dist/coloreditor/color-editor.spec.js +1586 -0
  32. package/dist/coloreditor/color-editor.spec.js.map +7 -0
  33. package/dist/coloreditor/tests/coloreditor-focused-colorgradient.js +821 -176
  34. package/dist/coloreditor/tests/coloreditor-focused-colorgradient.js.map +4 -4
  35. package/dist/coloreditor/tests/coloreditor-rtl.js +727 -265
  36. package/dist/coloreditor/tests/coloreditor-rtl.js.map +4 -4
  37. package/dist/coloreditor/tests/coloreditor-states.js +821 -176
  38. package/dist/coloreditor/tests/coloreditor-states.js.map +4 -4
  39. package/dist/coloreditor/tests/coloreditor-views.js +727 -265
  40. package/dist/coloreditor/tests/coloreditor-views.js.map +4 -4
  41. package/dist/coloreditor/tests/coloreditor.js +821 -176
  42. package/dist/coloreditor/tests/coloreditor.js.map +4 -4
  43. package/dist/colorgradient/color-contrast.js +199 -0
  44. package/dist/colorgradient/color-contrast.js.map +7 -0
  45. package/dist/colorgradient/color-gradient.spec.js +1246 -0
  46. package/dist/colorgradient/color-gradient.spec.js.map +7 -0
  47. package/dist/colorgradient/color-input.js +1029 -0
  48. package/dist/colorgradient/color-input.js.map +7 -0
  49. package/dist/colorgradient/tests/colorgradient-contrast.js +532 -155
  50. package/dist/colorgradient/tests/colorgradient-contrast.js.map +4 -4
  51. package/dist/colorgradient/tests/colorgradient-draghandle.js +536 -202
  52. package/dist/colorgradient/tests/colorgradient-draghandle.js.map +4 -4
  53. package/dist/colorgradient/tests/colorgradient-modes.js +433 -260
  54. package/dist/colorgradient/tests/colorgradient-modes.js.map +4 -4
  55. package/dist/colorgradient/tests/colorgradient-rtl.js +532 -155
  56. package/dist/colorgradient/tests/colorgradient-rtl.js.map +4 -4
  57. package/dist/colorgradient/tests/colorgradient-states.js +536 -132
  58. package/dist/colorgradient/tests/colorgradient-states.js.map +4 -4
  59. package/dist/colorgradient/tests/colorgradient.js +532 -132
  60. package/dist/colorgradient/tests/colorgradient.js.map +4 -4
  61. package/dist/colorpalette/colorpalette.spec.js +1 -1
  62. package/dist/colorpalette/colorpalette.spec.js.map +2 -2
  63. package/dist/colorpalette/tests/colorpalette-states.js +1 -1
  64. package/dist/colorpalette/tests/colorpalette-states.js.map +2 -2
  65. package/dist/colorpalette/tests/colorpalette-variants.js +1 -1
  66. package/dist/colorpalette/tests/colorpalette-variants.js.map +2 -2
  67. package/dist/colorpalette/tests/colorpalette.js +1 -1
  68. package/dist/colorpalette/tests/colorpalette.js.map +2 -2
  69. package/dist/colorpicker/tests/colorpicker-dropdown.js +757 -185
  70. package/dist/colorpicker/tests/colorpicker-dropdown.js.map +4 -4
  71. package/dist/editor/tests/editor-table-wizard.js +1984 -0
  72. package/dist/editor/tests/editor-table-wizard.js.map +7 -0
  73. package/dist/expansion-panel/expansion-panel.spec.js +253 -0
  74. package/dist/expansion-panel/expansion-panel.spec.js.map +7 -0
  75. package/dist/expansion-panel/tests/expansion-panel-rtl.js +100 -83
  76. package/dist/expansion-panel/tests/expansion-panel-rtl.js.map +4 -4
  77. package/dist/expansion-panel/tests/expansion-panel.js +100 -83
  78. package/dist/expansion-panel/tests/expansion-panel.js.map +4 -4
  79. package/dist/filemanager/tests/filemanager-contextmenu.js +492 -340
  80. package/dist/filemanager/tests/filemanager-contextmenu.js.map +4 -4
  81. package/dist/filemanager/tests/filemanager-drag-hint.js +468 -316
  82. package/dist/filemanager/tests/filemanager-drag-hint.js.map +4 -4
  83. package/dist/filemanager/tests/filemanager-gridview.js +533 -381
  84. package/dist/filemanager/tests/filemanager-gridview.js.map +4 -4
  85. package/dist/filemanager/tests/filemanager-listview.js +487 -335
  86. package/dist/filemanager/tests/filemanager-listview.js.map +4 -4
  87. package/dist/filemanager/tests/filemanager-preview.js +586 -434
  88. package/dist/filemanager/tests/filemanager-preview.js.map +4 -4
  89. package/dist/grid/tests/grid-column-menu-rtl.js +15 -15
  90. package/dist/grid/tests/grid-column-menu-rtl.js.map +2 -2
  91. package/dist/grid/tests/grid-column-menu.js +15 -15
  92. package/dist/grid/tests/grid-column-menu.js.map +2 -2
  93. package/dist/index.js +2131 -1244
  94. package/dist/index.js.map +4 -4
  95. package/dist/multiselecttree/multiselecttree.spec.js +1003 -0
  96. package/dist/multiselecttree/multiselecttree.spec.js.map +7 -0
  97. package/dist/multiselecttree/tests/multiselecttree-flat.js +1208 -0
  98. package/dist/multiselecttree/tests/multiselecttree-flat.js.map +7 -0
  99. package/dist/{editor/tests/editor-table-wizard-accessibility.js → multiselecttree/tests/multiselecttree-opened.js} +646 -645
  100. package/dist/multiselecttree/tests/multiselecttree-opened.js.map +7 -0
  101. package/dist/multiselecttree/tests/multiselecttree-outline.js +1208 -0
  102. package/dist/multiselecttree/tests/multiselecttree-outline.js.map +7 -0
  103. package/dist/multiselecttree/tests/multiselecttree-size.js +1107 -0
  104. package/dist/multiselecttree/tests/multiselecttree-size.js.map +7 -0
  105. package/dist/multiselecttree/tests/multiselecttree.js +1194 -0
  106. package/dist/multiselecttree/tests/multiselecttree.js.map +7 -0
  107. package/dist/pivotgrid/tests/pivotgrid-column-menus.js +8 -8
  108. package/dist/pivotgrid/tests/pivotgrid-column-menus.js.map +2 -2
  109. package/dist/scheduler/tests/scheduler-adaptive-agenda.js +6 -4
  110. package/dist/scheduler/tests/scheduler-adaptive-agenda.js.map +2 -2
  111. package/dist/scheduler/tests/scheduler-adaptive-day-resource-group.js +6 -4
  112. package/dist/scheduler/tests/scheduler-adaptive-day-resource-group.js.map +2 -2
  113. package/dist/scheduler/tests/scheduler-adaptive-day.js +6 -4
  114. package/dist/scheduler/tests/scheduler-adaptive-day.js.map +2 -2
  115. package/dist/scheduler/tests/scheduler-adaptive-month.js +6 -4
  116. package/dist/scheduler/tests/scheduler-adaptive-month.js.map +2 -2
  117. package/dist/scheduler/tests/scheduler-angular-agenda-rtl.js +8 -11
  118. package/dist/scheduler/tests/scheduler-angular-agenda-rtl.js.map +2 -2
  119. package/dist/scheduler/tests/scheduler-angular-agenda.js +8 -11
  120. package/dist/scheduler/tests/scheduler-angular-agenda.js.map +2 -2
  121. package/dist/scheduler/tests/scheduler-angular-day-rtl.js +8 -11
  122. package/dist/scheduler/tests/scheduler-angular-day-rtl.js.map +2 -2
  123. package/dist/scheduler/tests/scheduler-angular-month-rtl.js +8 -11
  124. package/dist/scheduler/tests/scheduler-angular-month-rtl.js.map +2 -2
  125. package/dist/scheduler/tests/scheduler-angular-month.js +8 -11
  126. package/dist/scheduler/tests/scheduler-angular-month.js.map +2 -2
  127. package/dist/scheduler/tests/scheduler-angular-rtl.js +8 -11
  128. package/dist/scheduler/tests/scheduler-angular-rtl.js.map +2 -2
  129. package/dist/scheduler/tests/scheduler-angular.js +8 -11
  130. package/dist/scheduler/tests/scheduler-angular.js.map +2 -2
  131. package/dist/scheduler/tests/scheduler-flex-layout.js +7 -10
  132. package/dist/scheduler/tests/scheduler-flex-layout.js.map +2 -2
  133. package/dist/scheduler/tests/scheduler-jquery-agenda.js +7 -10
  134. package/dist/scheduler/tests/scheduler-jquery-agenda.js.map +2 -2
  135. package/dist/scheduler/tests/scheduler-jquery-month.js +7 -10
  136. package/dist/scheduler/tests/scheduler-jquery-month.js.map +2 -2
  137. package/dist/scheduler/tests/scheduler-react-agenda.js +7 -10
  138. package/dist/scheduler/tests/scheduler-react-agenda.js.map +2 -2
  139. package/dist/scheduler/tests/scheduler-react-day.js +7 -10
  140. package/dist/scheduler/tests/scheduler-react-day.js.map +2 -2
  141. package/dist/scheduler/tests/scheduler-react-month.js +7 -10
  142. package/dist/scheduler/tests/scheduler-react-month.js.map +2 -2
  143. package/dist/scheduler/tests/scheduler-react-timeline-multi.js +7 -10
  144. package/dist/scheduler/tests/scheduler-react-timeline-multi.js.map +2 -2
  145. package/dist/scheduler/tests/scheduler-react-timeline.js +14 -20
  146. package/dist/scheduler/tests/scheduler-react-timeline.js.map +2 -2
  147. package/dist/scheduler/tests/scheduler-react-week.js +7 -10
  148. package/dist/scheduler/tests/scheduler-react-week.js.map +2 -2
  149. package/dist/scheduler/tests/scheduler-year.js +6 -9
  150. package/dist/scheduler/tests/scheduler-year.js.map +2 -2
  151. package/dist/scheduler/tests/scheduler.js +13 -19
  152. package/dist/scheduler/tests/scheduler.js.map +2 -2
  153. package/dist/slider/slider-tick.js +48 -0
  154. package/dist/slider/slider-tick.js.map +7 -0
  155. package/dist/slider/slider.spec.js +411 -0
  156. package/dist/slider/slider.spec.js.map +7 -0
  157. package/dist/slider/tests/slider-css-vars.js +300 -268
  158. package/dist/slider/tests/slider-css-vars.js.map +4 -4
  159. package/dist/slider/tests/slider-tick-absolute-position.js +155 -36
  160. package/dist/slider/tests/slider-tick-absolute-position.js.map +4 -4
  161. package/dist/slider/tests/slider.js +235 -209
  162. package/dist/slider/tests/slider.js.map +4 -4
  163. package/dist/spreadsheet/tests/spreadsheet-filter-menu.js +2 -2
  164. package/dist/spreadsheet/tests/spreadsheet-filter-menu.js.map +2 -2
  165. package/package.json +2 -2
  166. package/src/bottom-nav/bottom-nav-item.tsx +62 -0
  167. package/src/bottom-nav/bottom-nav.spec.tsx +76 -0
  168. package/src/bottom-nav/index.ts +2 -0
  169. package/src/bottom-nav/tests/bottom-nav-colors.tsx +109 -325
  170. package/src/bottom-nav/tests/bottom-nav-items.tsx +12 -22
  171. package/src/bottom-nav/tests/bottom-nav-rtl.tsx +13 -37
  172. package/src/bottom-nav/tests/bottom-nav.tsx +29 -77
  173. package/src/breadcrumb/breadcrumb-container.tsx +36 -0
  174. package/src/breadcrumb/breadcrumb-input-container.tsx +22 -0
  175. package/src/breadcrumb/breadcrumb-item-text.tsx +32 -0
  176. package/src/breadcrumb/breadcrumb-item.tsx +34 -0
  177. package/src/breadcrumb/breadcrumb-link.tsx +55 -0
  178. package/src/breadcrumb/breadcrumb-root-item-container.tsx +22 -0
  179. package/src/breadcrumb/breadcrumb.spec.tsx +55 -0
  180. package/src/breadcrumb/index.ts +7 -0
  181. package/src/breadcrumb/tests/breadcrumb-rtl.tsx +275 -231
  182. package/src/breadcrumb/tests/breadcrumb.tsx +274 -231
  183. package/src/coloreditor/color-editor.spec.tsx +93 -0
  184. package/src/coloreditor/index.ts +1 -0
  185. package/src/coloreditor/tests/coloreditor-focused-colorgradient.tsx +2 -76
  186. package/src/coloreditor/tests/coloreditor-rtl.tsx +3 -107
  187. package/src/coloreditor/tests/coloreditor-states.tsx +2 -77
  188. package/src/coloreditor/tests/coloreditor-views.tsx +3 -107
  189. package/src/coloreditor/tests/coloreditor.tsx +2 -77
  190. package/src/colorgradient/color-contrast.tsx +44 -0
  191. package/src/colorgradient/color-gradient.spec.tsx +102 -0
  192. package/src/colorgradient/color-input.tsx +123 -0
  193. package/src/colorgradient/index.ts +4 -0
  194. package/src/colorgradient/tests/colorgradient-contrast.tsx +2 -83
  195. package/src/colorgradient/tests/colorgradient-draghandle.tsx +4 -146
  196. package/src/colorgradient/tests/colorgradient-modes.tsx +6 -214
  197. package/src/colorgradient/tests/colorgradient-rtl.tsx +2 -74
  198. package/src/colorgradient/tests/colorgradient-states.tsx +14 -51
  199. package/src/colorgradient/tests/colorgradient.tsx +2 -55
  200. package/src/colorpalette/colorpalette.spec.tsx +5 -5
  201. package/src/colorpicker/tests/colorpicker-dropdown.tsx +7 -184
  202. package/src/editor/tests/editor-table-wizard.tsx +280 -0
  203. package/src/expansion-panel/expansion-panel.spec.tsx +86 -0
  204. package/src/expansion-panel/index.ts +1 -0
  205. package/src/expansion-panel/tests/expansion-panel-rtl.tsx +48 -111
  206. package/src/expansion-panel/tests/expansion-panel.tsx +49 -111
  207. package/src/filemanager/tests/filemanager-contextmenu.tsx +9 -8
  208. package/src/filemanager/tests/filemanager-drag-hint.tsx +9 -8
  209. package/src/filemanager/tests/filemanager-gridview.tsx +17 -16
  210. package/src/filemanager/tests/filemanager-listview.tsx +17 -16
  211. package/src/filemanager/tests/filemanager-preview.tsx +25 -24
  212. package/src/grid/tests/grid-column-menu-rtl.tsx +45 -15
  213. package/src/grid/tests/grid-column-menu.tsx +45 -15
  214. package/src/index.ts +7 -4
  215. package/src/multiselecttree/index.ts +1 -0
  216. package/src/multiselecttree/multiselecttree.spec.tsx +150 -0
  217. package/src/multiselecttree/tests/multiselecttree-flat.tsx +179 -0
  218. package/src/multiselecttree/tests/multiselecttree-opened.tsx +119 -0
  219. package/src/multiselecttree/tests/multiselecttree-outline.tsx +179 -0
  220. package/src/multiselecttree/tests/multiselecttree-size.tsx +54 -0
  221. package/src/multiselecttree/tests/multiselecttree.tsx +179 -0
  222. package/src/pivotgrid/tests/pivotgrid-column-menus.tsx +24 -8
  223. package/src/scheduler/tests/scheduler-adaptive-agenda.tsx +13 -14
  224. package/src/scheduler/tests/scheduler-adaptive-day-resource-group.tsx +13 -14
  225. package/src/scheduler/tests/scheduler-adaptive-day.tsx +13 -14
  226. package/src/scheduler/tests/scheduler-adaptive-month.tsx +13 -14
  227. package/src/scheduler/tests/scheduler-angular-agenda-rtl.tsx +13 -17
  228. package/src/scheduler/tests/scheduler-angular-agenda.tsx +13 -17
  229. package/src/scheduler/tests/scheduler-angular-day-rtl.tsx +13 -17
  230. package/src/scheduler/tests/scheduler-angular-month-rtl.tsx +13 -17
  231. package/src/scheduler/tests/scheduler-angular-month.tsx +13 -17
  232. package/src/scheduler/tests/scheduler-angular-rtl.tsx +13 -17
  233. package/src/scheduler/tests/scheduler-angular.tsx +13 -17
  234. package/src/scheduler/tests/scheduler-flex-layout.tsx +10 -14
  235. package/src/scheduler/tests/scheduler-jquery-agenda.tsx +10 -14
  236. package/src/scheduler/tests/scheduler-jquery-month.tsx +10 -14
  237. package/src/scheduler/tests/scheduler-react-agenda.tsx +10 -14
  238. package/src/scheduler/tests/scheduler-react-day.tsx +10 -14
  239. package/src/scheduler/tests/scheduler-react-month.tsx +10 -14
  240. package/src/scheduler/tests/scheduler-react-timeline-multi.tsx +10 -14
  241. package/src/scheduler/tests/scheduler-react-timeline.tsx +19 -28
  242. package/src/scheduler/tests/scheduler-react-week.tsx +10 -14
  243. package/src/scheduler/tests/scheduler-year.tsx +9 -13
  244. package/src/scheduler/tests/scheduler.tsx +20 -27
  245. package/src/slider/index.ts +2 -0
  246. package/src/slider/slider-tick.tsx +52 -0
  247. package/src/slider/slider.spec.tsx +120 -0
  248. package/src/slider/tests/slider-css-vars.tsx +185 -349
  249. package/src/slider/tests/slider-tick-absolute-position.tsx +40 -64
  250. package/src/slider/tests/slider.tsx +118 -262
  251. package/src/spreadsheet/tests/spreadsheet-filter-menu.tsx +6 -2
  252. package/dist/editor/tests/editor-table-wizard-accessibility.js.map +0 -7
  253. package/src/editor/tests/editor-table-wizard-accessibility.tsx +0 -69
package/src/breadcrumb/tests/breadcrumb.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import ReactDOM from 'react-dom/client';
2
2
  import { Icon } from '../../icon';
3
3
  import { Textbox } from '../../textbox';
4
+ import { Breadcrumb, BreadcrumbContainer, BreadcrumbInputContainer, BreadcrumbItem, BreadcrumbItemText, BreadcrumbLink, BreadcrumbRootItemContainer } from '../../breadcrumb';
4
5
 
5
6
  const root = ReactDOM.createRoot(
6
7
  document.getElementById('app') as HTMLElement
@@ -11,299 +12,341 @@ root.render(
11
12
  <div id="test-area" className="k-d-grid k-grid-cols-2">
12
13
  <span className="k-colspan-all k-col-span-full">Wrapping</span>
13
14
  <div>
14
- <div style={{ width: "400px" }} className="k-widget k-breadcrumb k-breadcrumb-wrap">
15
- <ol className="k-breadcrumb-root-item-container">
16
- <li className="k-flex-none k-breadcrumb-root-item k-breadcrumb-item">
17
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-root-link k-breadcrumb-icontext-link">
15
+ <Breadcrumb collapsing="wrap" style={{ width: "400px" }}>
16
+ <BreadcrumbRootItemContainer>
17
+ <BreadcrumbItem root>
18
+ <BreadcrumbLink root icontext>
18
19
  <Icon name="home" />
19
- Start item
20
- </span>
21
- </li>
22
- </ol>
20
+ <BreadcrumbItemText text="Start item"></BreadcrumbItemText>
21
+ </BreadcrumbLink>
22
+ </BreadcrumbItem>
23
+ </BreadcrumbRootItemContainer>
23
24
 
24
- <ol className="k-breadcrumb-container k-flex-wrap">
25
- <li className="k-flex-none k-breadcrumb-item">
25
+ <BreadcrumbContainer collapsing="wrap">
26
+ <BreadcrumbItem>
26
27
  <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
27
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled k-breadcrumb-icontext-link">
28
+ <BreadcrumbLink disabled icontext>
28
29
  <Icon name="clock" />
29
- First item
30
- </span>
31
- </li>
32
- <li className="k-flex-none k-breadcrumb-item">
30
+ <BreadcrumbItemText text="First item"></BreadcrumbItemText>
31
+ </BreadcrumbLink>
32
+ </BreadcrumbItem>
33
+ <BreadcrumbItem>
33
34
  <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
34
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link">
35
+ <BreadcrumbLink>
35
36
  <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
36
- Second item
37
- </span>
38
- </li>
39
- <li className="k-flex-none k-breadcrumb-item">
40
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
41
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link"> <span className="test"></span> Third item </span>
42
- </li>
43
- <li className="k-flex-none k-breadcrumb-item">
44
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
45
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link">
37
+ <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
38
+ </BreadcrumbLink>
39
+ </BreadcrumbItem>
40
+ <BreadcrumbItem>
41
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
42
+ <BreadcrumbLink>
43
+ <span className="test"></span>
44
+ <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
45
+ </BreadcrumbLink>
46
+ </BreadcrumbItem>
47
+ <BreadcrumbItem>
48
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
49
+ <BreadcrumbLink icon>
46
50
  <Icon name="clock" />
47
- </span>
48
- </li>
49
- <li className="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
50
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
51
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled">
52
- Fifth item
53
- </span>
54
- </li>
55
- </ol>
56
- </div>
51
+ </BreadcrumbLink>
52
+ </BreadcrumbItem>
53
+ <BreadcrumbItem last>
54
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
55
+ <BreadcrumbLink disabled>
56
+ <BreadcrumbItemText text="Fifth item"></BreadcrumbItemText>
57
+ </BreadcrumbLink>
58
+ </BreadcrumbItem>
59
+ </BreadcrumbContainer>
60
+ </Breadcrumb>
57
61
  </div>
58
62
 
59
63
  <div>
60
- <div style={{ width: "400px" }} className="k-widget k-breadcrumb k-breadcrumb-wrap">
61
- <ol className="k-breadcrumb-root-item-container">
62
- <li className="k-flex-none k-breadcrumb-root-item k-breadcrumb-item">
63
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-root-link">
64
- Start item
65
- </span>
66
- </li>
67
- </ol>
64
+ <Breadcrumb collapsing="wrap" style={{ width: "400px" }}>
65
+ <BreadcrumbRootItemContainer>
66
+ <BreadcrumbItem root>
67
+ <BreadcrumbLink root>
68
+ <BreadcrumbItemText text="Start item"></BreadcrumbItemText>
69
+ </BreadcrumbLink>
70
+ </BreadcrumbItem>
71
+ </BreadcrumbRootItemContainer>
68
72
 
69
- <ol className="k-breadcrumb-container k-flex-wrap">
70
- <li className="k-flex-none k-breadcrumb-item">
73
+ <BreadcrumbContainer collapsing="wrap">
74
+ <BreadcrumbItem>
71
75
  <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
72
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled k-breadcrumb-icontext-link">
76
+ <BreadcrumbLink disabled icontext>
73
77
  <Icon name="clock" />
74
- First item
75
- </span>
76
- </li>
77
- <li className="k-flex-none k-breadcrumb-item">
78
+ <BreadcrumbItemText text="First item"></BreadcrumbItemText>
79
+ </BreadcrumbLink>
80
+ </BreadcrumbItem>
81
+ <BreadcrumbItem>
78
82
  <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
79
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link">
83
+ <BreadcrumbLink>
80
84
  <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
81
- Second item
82
- </span>
83
- </li>
84
- <li className="k-flex-none k-breadcrumb-item">
85
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
86
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link"> <span className="test"></span> Third item </span>
87
- </li>
88
- <li className="k-flex-none k-breadcrumb-item">
89
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
90
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link">
85
+ <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
86
+ </BreadcrumbLink>
87
+ </BreadcrumbItem>
88
+ <BreadcrumbItem>
89
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
90
+ <BreadcrumbLink>
91
+ <span className="test"></span>
92
+ <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
93
+ </BreadcrumbLink>
94
+ </BreadcrumbItem>
95
+ <BreadcrumbItem>
96
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
97
+ <BreadcrumbLink icon>
91
98
  <Icon name="clock" />
92
- </span>
93
- </li>
94
- <li className="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
95
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
96
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled">
97
- Fifth item
98
- </span>
99
- </li>
100
- </ol>
101
- </div>
99
+ </BreadcrumbLink>
100
+ </BreadcrumbItem>
101
+ <BreadcrumbItem last>
102
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
103
+ <BreadcrumbLink disabled>
104
+ <BreadcrumbItemText text="Fifth item"></BreadcrumbItemText>
105
+ </BreadcrumbLink>
106
+ </BreadcrumbItem>
107
+ </BreadcrumbContainer>
108
+ </Breadcrumb>
102
109
  </div>
103
110
 
104
111
  <div>
105
- <div style={{ width: "400px" }} className="k-widget k-breadcrumb k-breadcrumb-wrap">
106
- <ol className="k-breadcrumb-root-item-container">
107
- <li className="k-flex-none k-breadcrumb-root-item k-breadcrumb-item">
108
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-root-link k-breadcrumb-icon-link">
112
+ <Breadcrumb collapsing="wrap" style={{ width: "400px" }}>
113
+ <BreadcrumbRootItemContainer>
114
+ <BreadcrumbItem root>
115
+ <BreadcrumbLink root icon>
109
116
  <Icon name="home" />
110
- </span>
111
- </li>
112
- </ol>
113
- <ol className="k-breadcrumb-container k-flex-wrap">
114
- <li className="k-flex-none k-breadcrumb-item">
117
+ </BreadcrumbLink>
118
+ </BreadcrumbItem>
119
+ </BreadcrumbRootItemContainer>
120
+
121
+ <BreadcrumbContainer collapsing="wrap">
122
+ <BreadcrumbItem>
115
123
  <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
116
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled k-breadcrumb-icontext-link">
124
+ <BreadcrumbLink disabled icontext>
117
125
  <Icon name="clock" />
118
- First item
119
- </span>
120
- </li>
121
- <li className="k-flex-none k-breadcrumb-item">
126
+ <BreadcrumbItemText text="First item"></BreadcrumbItemText>
127
+ </BreadcrumbLink>
128
+ </BreadcrumbItem>
129
+ <BreadcrumbItem>
122
130
  <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
123
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link">
131
+ <BreadcrumbLink>
124
132
  <img className="k-image" src="/packages/html/assets/avatar.jpg" width="20" height="20" />
125
- Second item
126
- </span>
127
- </li>
128
- <li className="k-flex-none k-breadcrumb-item">
129
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
130
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link"> <span className="test"></span> Third item </span>
131
- </li>
132
- <li className="k-flex-none k-breadcrumb-item">
133
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
134
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link">
133
+ <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
134
+ </BreadcrumbLink>
135
+ </BreadcrumbItem>
136
+ <BreadcrumbItem>
137
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
138
+ <BreadcrumbLink>
139
+ <span className="test"></span>
140
+ <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
141
+ </BreadcrumbLink>
142
+ </BreadcrumbItem>
143
+ <BreadcrumbItem>
144
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
145
+ <BreadcrumbLink icon>
135
146
  <Icon name="clock" />
136
- </span>
137
- </li>
138
- <li className="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
139
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
140
- <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled">
141
- Fifth item
142
- </span>
143
- </li>
144
- </ol>
145
- </div>
147
+ </BreadcrumbLink>
148
+ </BreadcrumbItem>
149
+ <BreadcrumbItem last>
150
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
151
+ <BreadcrumbLink disabled>
152
+ <BreadcrumbItemText text="Fifth item"></BreadcrumbItemText>
153
+ </BreadcrumbLink>
154
+ </BreadcrumbItem>
155
+ </BreadcrumbContainer>
156
+ </Breadcrumb>
146
157
  </div>
147
158
 
148
159
  <span className="k-colspan-all k-col-span-full">Navigation Mode</span>
149
160
  <div>
150
- <nav id="breadcrumbs" className="k-widget k-breadcrumb">
151
- <ol className="k-breadcrumb-container">
152
- <li className="k-breadcrumb-item k-breadcrumb-root-item">
153
- <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link">
161
+ <Breadcrumb>
162
+ <BreadcrumbContainer>
163
+ <BreadcrumbItem root>
164
+ <BreadcrumbLink root icon>
154
165
  <Icon name="home" />
155
- </a>
156
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
157
- </li>
158
- <li className="k-breadcrumb-item">
159
- <a className="k-breadcrumb-link" href="#">First item</a>
160
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
161
- </li>
162
- <li className="k-breadcrumb-item">
163
- <a className="k-breadcrumb-link" href="#">Second item</a>
164
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
165
- </li>
166
- <li className="k-breadcrumb-item k-breadcrumb-last-item">
167
- <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
168
- </li>
169
- </ol>
170
- </nav>
166
+ </BreadcrumbLink>
167
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
168
+ </BreadcrumbItem>
169
+ <BreadcrumbItem>
170
+ <BreadcrumbLink>
171
+ <BreadcrumbItemText text="First item"></BreadcrumbItemText>
172
+ </BreadcrumbLink>
173
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
174
+ </BreadcrumbItem>
175
+ <BreadcrumbItem>
176
+ <BreadcrumbLink>
177
+ <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
178
+ </BreadcrumbLink>
179
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
180
+ </BreadcrumbItem>
181
+ <BreadcrumbItem last>
182
+ <BreadcrumbLink disabled>
183
+ <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
184
+ </BreadcrumbLink>
185
+ </BreadcrumbItem>
186
+ </BreadcrumbContainer>
187
+ </Breadcrumb>
171
188
  </div>
172
189
 
173
190
  <div>
174
- <nav id="breadcrumbs" className="k-widget k-breadcrumb">
175
- <ol className="k-breadcrumb-container">
176
- <li className="k-breadcrumb-item k-breadcrumb-root-item">
177
- <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-focus">
191
+ <Breadcrumb>
192
+ <BreadcrumbContainer>
193
+ <BreadcrumbItem root>
194
+ <BreadcrumbLink root icon focus>
178
195
  <Icon name="home" />
179
- </a>
180
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
181
- </li>
182
- <li className="k-breadcrumb-item">
183
- <a className="k-breadcrumb-link k-focus" href="#">First item</a>
184
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
185
- </li>
186
- <li className="k-breadcrumb-item">
187
- <a className="k-breadcrumb-link" href="#">Second item</a>
188
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
189
- </li>
190
- <li className="k-breadcrumb-item k-breadcrumb-last-item">
191
- <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
192
- </li>
193
- </ol>
194
- </nav>
196
+ </BreadcrumbLink>
197
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
198
+ </BreadcrumbItem>
199
+ <BreadcrumbItem>
200
+ <BreadcrumbLink focus>
201
+ <BreadcrumbItemText text="First item"></BreadcrumbItemText>
202
+ </BreadcrumbLink>
203
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
204
+ </BreadcrumbItem>
205
+ <BreadcrumbItem>
206
+ <BreadcrumbLink>
207
+ <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
208
+ </BreadcrumbLink>
209
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
210
+ </BreadcrumbItem>
211
+ <BreadcrumbItem last>
212
+ <BreadcrumbLink disabled>
213
+ <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
214
+ </BreadcrumbLink>
215
+ </BreadcrumbItem>
216
+ </BreadcrumbContainer>
217
+ </Breadcrumb>
195
218
  </div>
196
219
 
197
220
  <div>
198
- <nav id="breadcrumbs" className="k-widget k-breadcrumb">
199
- <ol className="k-breadcrumb-container">
200
- <li className="k-breadcrumb-item k-breadcrumb-root-item">
201
- <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-hover">
221
+ <Breadcrumb>
222
+ <BreadcrumbContainer>
223
+ <BreadcrumbItem root>
224
+ <BreadcrumbLink root icon hover>
202
225
  <Icon name="home" />
203
- </a>
204
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
205
- </li>
206
- <li className="k-breadcrumb-item">
207
- <a className="k-breadcrumb-link k-hover" href="#">First item</a>
208
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
209
- </li>
210
- <li className="k-breadcrumb-item">
211
- <a className="k-breadcrumb-link" href="#">Second item</a>
212
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
213
- </li>
214
- <li className="k-breadcrumb-item k-breadcrumb-last-item">
215
- <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
216
- </li>
217
- </ol>
218
- </nav>
226
+ </BreadcrumbLink>
227
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
228
+ </BreadcrumbItem>
229
+ <BreadcrumbItem>
230
+ <BreadcrumbLink hover>
231
+ <BreadcrumbItemText text="First item"></BreadcrumbItemText>
232
+ </BreadcrumbLink>
233
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
234
+ </BreadcrumbItem>
235
+ <BreadcrumbItem>
236
+ <BreadcrumbLink>
237
+ <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
238
+ </BreadcrumbLink>
239
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
240
+ </BreadcrumbItem>
241
+ <BreadcrumbItem last>
242
+ <BreadcrumbLink disabled>
243
+ <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
244
+ </BreadcrumbLink>
245
+ </BreadcrumbItem>
246
+ </BreadcrumbContainer>
247
+ </Breadcrumb>
219
248
  </div>
220
249
 
221
250
  <div>
222
- <nav id="breadcrumbs" className="k-widget k-breadcrumb">
223
- <ol className="k-breadcrumb-container">
224
- <li className="k-breadcrumb-item k-breadcrumb-root-item">
225
- <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-hover">
251
+ <Breadcrumb>
252
+ <BreadcrumbContainer>
253
+ <BreadcrumbItem root>
254
+ <BreadcrumbLink root icon hover>
226
255
  <Icon name="home" />
227
- </a>
256
+ </BreadcrumbLink>
228
257
  <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
229
- </li>
230
- <li className="k-breadcrumb-item">
231
- <a className="k-breadcrumb-link k-breadcrumb-icontext-link" href="#">
258
+ </BreadcrumbItem>
259
+ <BreadcrumbItem>
260
+ <BreadcrumbLink icontext>
232
261
  <Icon name="cloud" />
233
- First item
234
- </a>
262
+ <BreadcrumbItemText text="First item"></BreadcrumbItemText>
263
+ </BreadcrumbLink>
235
264
  <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
236
- </li>
237
- <li className="k-breadcrumb-item">
238
- <a className="k-breadcrumb-link k-breadcrumb-icon-link" href="#">
265
+ </BreadcrumbItem>
266
+ <BreadcrumbItem>
267
+ <BreadcrumbLink icon>
239
268
  <Icon name="photo-camera" />
240
- </a>
241
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
242
- </li>
243
- <li className="k-breadcrumb-item k-breadcrumb-last-item">
244
- <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
245
- </li>
246
- </ol>
247
- </nav>
269
+ </BreadcrumbLink>
270
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
271
+ </BreadcrumbItem>
272
+ <BreadcrumbItem last>
273
+ <BreadcrumbLink disabled>
274
+ <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
275
+ </BreadcrumbLink>
276
+ </BreadcrumbItem>
277
+ </BreadcrumbContainer>
278
+ </Breadcrumb>
248
279
  </div>
249
280
 
250
281
  <span className="k-colspan-all k-col-span-full">Edit Mode</span>
251
282
  <div>
252
- <nav id="breadcrumbs" className="k-widget k-breadcrumb k-focus">
253
- <ol className="k-breadcrumb-container">
254
- <li className="k-breadcrumb-item k-breadcrumb-root-item">
255
- <a href="#" className="k-breadcrumb-root-link">
283
+ <Breadcrumb focus>
284
+ <BreadcrumbContainer>
285
+ <BreadcrumbItem root>
286
+ <BreadcrumbLink root icon>
256
287
  <Icon name="home" />
257
- </a>
258
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
259
- </li>
260
- <li className="k-breadcrumb-item">
261
- <a className="k-breadcrumb-link" href="#">First item</a>
262
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
263
- </li>
264
- <li className="k-breadcrumb-item">
265
- <a className="k-breadcrumb-link" href="#">Second item</a>
266
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
267
- </li>
268
- <li className="k-breadcrumb-item k-breadcrumb-last-item">
269
- <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
270
- </li>
271
- </ol>
272
- </nav>
288
+ </BreadcrumbLink>
289
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
290
+ </BreadcrumbItem>
291
+ <BreadcrumbItem>
292
+ <BreadcrumbLink>
293
+ <BreadcrumbItemText text="First item"></BreadcrumbItemText>
294
+ </BreadcrumbLink>
295
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
296
+ </BreadcrumbItem>
297
+ <BreadcrumbItem>
298
+ <BreadcrumbLink>
299
+ <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
300
+ </BreadcrumbLink>
301
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
302
+ </BreadcrumbItem>
303
+ <BreadcrumbItem last>
304
+ <BreadcrumbLink disabled>
305
+ <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
306
+ </BreadcrumbLink>
307
+ </BreadcrumbItem>
308
+ </BreadcrumbContainer>
309
+ </Breadcrumb>
273
310
  </div>
274
311
 
275
312
  <div>
276
- <nav id="breadcrumbs" className="k-widget k-breadcrumb">
277
- <div className="k-breadcrumb-input-container">
313
+ <Breadcrumb>
314
+ <BreadcrumbInputContainer>
278
315
  <Textbox showClearButton={false} value="First item/Second item/Breadcrumb Pattern/Third item" />
279
- </div>
280
- </nav>
316
+ </BreadcrumbInputContainer>
317
+ </Breadcrumb>
281
318
  </div>
282
319
 
283
320
  <span className="k-colspan-all k-col-span-full">Overflow</span>
284
321
  <div>
285
- <nav id="breadcrumbs" className="k-widget k-breadcrumb">
286
- <ol className="k-breadcrumb-container">
287
- <li className="k-breadcrumb-item k-breadcrumb-root-item">
288
- <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link">
322
+ <Breadcrumb>
323
+ <BreadcrumbContainer>
324
+ <BreadcrumbItem root>
325
+ <BreadcrumbLink root icon>
289
326
  <Icon name="home" />
290
- </a>
327
+ </BreadcrumbLink>
291
328
  <Icon className="k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon" name="arrow-chevron-right" />
292
329
  <Icon className="k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon" name="arrow-chevron-right" />
293
- </li>
294
- <li className="k-breadcrumb-item" hidden>
295
- <a className="k-breadcrumb-link" href="#">First item</a>
296
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
297
- </li>
298
- <li className="k-breadcrumb-item" hidden>
299
- <a className="k-breadcrumb-link" href="#">Second item</a>
300
- <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
301
- </li>
302
- <li className="k-breadcrumb-item k-breadcrumb-last-item">
303
- <a className="k-breadcrumb-link k-disabled" href="#">Breadcrumb item </a>
304
- </li>
305
- </ol>
306
- </nav>
330
+ </BreadcrumbItem>
331
+ <BreadcrumbItem hidden>
332
+ <BreadcrumbLink>
333
+ <BreadcrumbItemText text="First item"></BreadcrumbItemText>
334
+ </BreadcrumbLink>
335
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
336
+ </BreadcrumbItem>
337
+ <BreadcrumbItem hidden>
338
+ <BreadcrumbLink>
339
+ <BreadcrumbItemText text="Second item"></BreadcrumbItemText>
340
+ </BreadcrumbLink>
341
+ <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
342
+ </BreadcrumbItem>
343
+ <BreadcrumbItem last>
344
+ <BreadcrumbLink disabled>
345
+ <BreadcrumbItemText text="Breadcrumb item "></BreadcrumbItemText>
346
+ </BreadcrumbLink>
347
+ </BreadcrumbItem>
348
+ </BreadcrumbContainer>
349
+ </Breadcrumb>
307
350
  </div>
308
351
  </div>
309
352
  </>