@progress/kendo-themes-html 6.3.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 (256) hide show
  1. package/dist/action-sheet/tests/action-sheet-calendar-infinite.js +1284 -0
  2. package/dist/action-sheet/tests/action-sheet-calendar-infinite.js.map +7 -0
  3. package/dist/bottom-nav/bottom-nav-item.js +234 -0
  4. package/dist/bottom-nav/bottom-nav-item.js.map +7 -0
  5. package/dist/bottom-nav/bottom-nav.spec.js +122 -0
  6. package/dist/bottom-nav/bottom-nav.spec.js.map +7 -0
  7. package/dist/bottom-nav/tests/bottom-nav-colors.js +269 -358
  8. package/dist/bottom-nav/tests/bottom-nav-colors.js.map +4 -4
  9. package/dist/bottom-nav/tests/bottom-nav-items.js +168 -53
  10. package/dist/bottom-nav/tests/bottom-nav-items.js.map +4 -4
  11. package/dist/bottom-nav/tests/bottom-nav-rtl.js +153 -50
  12. package/dist/bottom-nav/tests/bottom-nav-rtl.js.map +4 -4
  13. package/dist/bottom-nav/tests/bottom-nav.js +167 -76
  14. package/dist/bottom-nav/tests/bottom-nav.js.map +4 -4
  15. package/dist/breadcrumb/breadcrumb-container.js +76 -0
  16. package/dist/breadcrumb/breadcrumb-container.js.map +7 -0
  17. package/dist/breadcrumb/breadcrumb-input-container.js +65 -0
  18. package/dist/breadcrumb/breadcrumb-input-container.js.map +7 -0
  19. package/dist/breadcrumb/breadcrumb-item-text.js +70 -0
  20. package/dist/breadcrumb/breadcrumb-item-text.js.map +7 -0
  21. package/dist/breadcrumb/breadcrumb-item.js +75 -0
  22. package/dist/breadcrumb/breadcrumb-item.js.map +7 -0
  23. package/dist/breadcrumb/breadcrumb-link.js +132 -0
  24. package/dist/breadcrumb/breadcrumb-link.js.map +7 -0
  25. package/dist/breadcrumb/breadcrumb-root-item-container.js +65 -0
  26. package/dist/breadcrumb/breadcrumb-root-item-container.js.map +7 -0
  27. package/dist/breadcrumb/breadcrumb.spec.js +125 -0
  28. package/dist/breadcrumb/breadcrumb.spec.js.map +7 -0
  29. package/dist/breadcrumb/tests/breadcrumb-rtl.js +349 -153
  30. package/dist/breadcrumb/tests/breadcrumb-rtl.js.map +4 -4
  31. package/dist/breadcrumb/tests/breadcrumb.js +349 -153
  32. package/dist/breadcrumb/tests/breadcrumb.js.map +4 -4
  33. package/dist/coloreditor/color-editor.spec.js +1586 -0
  34. package/dist/coloreditor/color-editor.spec.js.map +7 -0
  35. package/dist/coloreditor/tests/coloreditor-focused-colorgradient.js +821 -176
  36. package/dist/coloreditor/tests/coloreditor-focused-colorgradient.js.map +4 -4
  37. package/dist/coloreditor/tests/coloreditor-rtl.js +727 -265
  38. package/dist/coloreditor/tests/coloreditor-rtl.js.map +4 -4
  39. package/dist/coloreditor/tests/coloreditor-states.js +821 -176
  40. package/dist/coloreditor/tests/coloreditor-states.js.map +4 -4
  41. package/dist/coloreditor/tests/coloreditor-views.js +727 -265
  42. package/dist/coloreditor/tests/coloreditor-views.js.map +4 -4
  43. package/dist/coloreditor/tests/coloreditor.js +821 -176
  44. package/dist/coloreditor/tests/coloreditor.js.map +4 -4
  45. package/dist/colorgradient/color-contrast.js +199 -0
  46. package/dist/colorgradient/color-contrast.js.map +7 -0
  47. package/dist/colorgradient/color-gradient.spec.js +1246 -0
  48. package/dist/colorgradient/color-gradient.spec.js.map +7 -0
  49. package/dist/colorgradient/color-input.js +1029 -0
  50. package/dist/colorgradient/color-input.js.map +7 -0
  51. package/dist/colorgradient/tests/colorgradient-contrast.js +532 -155
  52. package/dist/colorgradient/tests/colorgradient-contrast.js.map +4 -4
  53. package/dist/colorgradient/tests/colorgradient-draghandle.js +536 -202
  54. package/dist/colorgradient/tests/colorgradient-draghandle.js.map +4 -4
  55. package/dist/colorgradient/tests/colorgradient-modes.js +433 -260
  56. package/dist/colorgradient/tests/colorgradient-modes.js.map +4 -4
  57. package/dist/colorgradient/tests/colorgradient-rtl.js +532 -155
  58. package/dist/colorgradient/tests/colorgradient-rtl.js.map +4 -4
  59. package/dist/colorgradient/tests/colorgradient-states.js +536 -132
  60. package/dist/colorgradient/tests/colorgradient-states.js.map +4 -4
  61. package/dist/colorgradient/tests/colorgradient.js +532 -132
  62. package/dist/colorgradient/tests/colorgradient.js.map +4 -4
  63. package/dist/colorpalette/colorpalette.spec.js +1 -1
  64. package/dist/colorpalette/colorpalette.spec.js.map +2 -2
  65. package/dist/colorpalette/tests/colorpalette-states.js +1 -1
  66. package/dist/colorpalette/tests/colorpalette-states.js.map +2 -2
  67. package/dist/colorpalette/tests/colorpalette-variants.js +1 -1
  68. package/dist/colorpalette/tests/colorpalette-variants.js.map +2 -2
  69. package/dist/colorpalette/tests/colorpalette.js +1 -1
  70. package/dist/colorpalette/tests/colorpalette.js.map +2 -2
  71. package/dist/colorpicker/tests/colorpicker-dropdown.js +757 -185
  72. package/dist/colorpicker/tests/colorpicker-dropdown.js.map +4 -4
  73. package/dist/editor/tests/editor-table-wizard.js +1984 -0
  74. package/dist/editor/tests/editor-table-wizard.js.map +7 -0
  75. package/dist/expansion-panel/expansion-panel.spec.js +253 -0
  76. package/dist/expansion-panel/expansion-panel.spec.js.map +7 -0
  77. package/dist/expansion-panel/tests/expansion-panel-rtl.js +100 -83
  78. package/dist/expansion-panel/tests/expansion-panel-rtl.js.map +4 -4
  79. package/dist/expansion-panel/tests/expansion-panel.js +100 -83
  80. package/dist/expansion-panel/tests/expansion-panel.js.map +4 -4
  81. package/dist/filemanager/tests/filemanager-contextmenu.js +492 -340
  82. package/dist/filemanager/tests/filemanager-contextmenu.js.map +4 -4
  83. package/dist/filemanager/tests/filemanager-drag-hint.js +468 -316
  84. package/dist/filemanager/tests/filemanager-drag-hint.js.map +4 -4
  85. package/dist/filemanager/tests/filemanager-gridview.js +533 -381
  86. package/dist/filemanager/tests/filemanager-gridview.js.map +4 -4
  87. package/dist/filemanager/tests/filemanager-listview.js +487 -335
  88. package/dist/filemanager/tests/filemanager-listview.js.map +4 -4
  89. package/dist/filemanager/tests/filemanager-preview.js +586 -434
  90. package/dist/filemanager/tests/filemanager-preview.js.map +4 -4
  91. package/dist/grid/tests/grid-column-menu-rtl.js +15 -15
  92. package/dist/grid/tests/grid-column-menu-rtl.js.map +2 -2
  93. package/dist/grid/tests/grid-column-menu.js +15 -15
  94. package/dist/grid/tests/grid-column-menu.js.map +2 -2
  95. package/dist/index.js +2131 -1244
  96. package/dist/index.js.map +4 -4
  97. package/dist/multiselecttree/multiselecttree.spec.js +1003 -0
  98. package/dist/multiselecttree/multiselecttree.spec.js.map +7 -0
  99. package/dist/multiselecttree/tests/multiselecttree-flat.js +1208 -0
  100. package/dist/multiselecttree/tests/multiselecttree-flat.js.map +7 -0
  101. package/dist/{editor/tests/editor-table-wizard-accessibility.js → multiselecttree/tests/multiselecttree-opened.js} +646 -645
  102. package/dist/multiselecttree/tests/multiselecttree-opened.js.map +7 -0
  103. package/dist/multiselecttree/tests/multiselecttree-outline.js +1208 -0
  104. package/dist/multiselecttree/tests/multiselecttree-outline.js.map +7 -0
  105. package/dist/multiselecttree/tests/multiselecttree-size.js +1107 -0
  106. package/dist/multiselecttree/tests/multiselecttree-size.js.map +7 -0
  107. package/dist/multiselecttree/tests/multiselecttree.js +1194 -0
  108. package/dist/multiselecttree/tests/multiselecttree.js.map +7 -0
  109. package/dist/pivotgrid/tests/pivotgrid-column-menus.js +8 -8
  110. package/dist/pivotgrid/tests/pivotgrid-column-menus.js.map +2 -2
  111. package/dist/scheduler/tests/scheduler-adaptive-agenda.js +6 -4
  112. package/dist/scheduler/tests/scheduler-adaptive-agenda.js.map +2 -2
  113. package/dist/scheduler/tests/scheduler-adaptive-day-resource-group.js +6 -4
  114. package/dist/scheduler/tests/scheduler-adaptive-day-resource-group.js.map +2 -2
  115. package/dist/scheduler/tests/scheduler-adaptive-day.js +6 -4
  116. package/dist/scheduler/tests/scheduler-adaptive-day.js.map +2 -2
  117. package/dist/scheduler/tests/scheduler-adaptive-month.js +6 -4
  118. package/dist/scheduler/tests/scheduler-adaptive-month.js.map +2 -2
  119. package/dist/scheduler/tests/scheduler-angular-agenda-rtl.js +8 -11
  120. package/dist/scheduler/tests/scheduler-angular-agenda-rtl.js.map +2 -2
  121. package/dist/scheduler/tests/scheduler-angular-agenda.js +8 -11
  122. package/dist/scheduler/tests/scheduler-angular-agenda.js.map +2 -2
  123. package/dist/scheduler/tests/scheduler-angular-day-rtl.js +8 -11
  124. package/dist/scheduler/tests/scheduler-angular-day-rtl.js.map +2 -2
  125. package/dist/scheduler/tests/scheduler-angular-month-rtl.js +8 -11
  126. package/dist/scheduler/tests/scheduler-angular-month-rtl.js.map +2 -2
  127. package/dist/scheduler/tests/scheduler-angular-month.js +8 -11
  128. package/dist/scheduler/tests/scheduler-angular-month.js.map +2 -2
  129. package/dist/scheduler/tests/scheduler-angular-rtl.js +8 -11
  130. package/dist/scheduler/tests/scheduler-angular-rtl.js.map +2 -2
  131. package/dist/scheduler/tests/scheduler-angular.js +8 -11
  132. package/dist/scheduler/tests/scheduler-angular.js.map +2 -2
  133. package/dist/scheduler/tests/scheduler-flex-layout.js +7 -10
  134. package/dist/scheduler/tests/scheduler-flex-layout.js.map +2 -2
  135. package/dist/scheduler/tests/scheduler-jquery-agenda.js +7 -10
  136. package/dist/scheduler/tests/scheduler-jquery-agenda.js.map +2 -2
  137. package/dist/scheduler/tests/scheduler-jquery-month.js +7 -10
  138. package/dist/scheduler/tests/scheduler-jquery-month.js.map +2 -2
  139. package/dist/scheduler/tests/scheduler-react-agenda.js +7 -10
  140. package/dist/scheduler/tests/scheduler-react-agenda.js.map +2 -2
  141. package/dist/scheduler/tests/scheduler-react-day.js +7 -10
  142. package/dist/scheduler/tests/scheduler-react-day.js.map +2 -2
  143. package/dist/scheduler/tests/scheduler-react-month.js +7 -10
  144. package/dist/scheduler/tests/scheduler-react-month.js.map +2 -2
  145. package/dist/scheduler/tests/scheduler-react-timeline-multi.js +7 -10
  146. package/dist/scheduler/tests/scheduler-react-timeline-multi.js.map +2 -2
  147. package/dist/scheduler/tests/scheduler-react-timeline.js +14 -20
  148. package/dist/scheduler/tests/scheduler-react-timeline.js.map +2 -2
  149. package/dist/scheduler/tests/scheduler-react-week.js +7 -10
  150. package/dist/scheduler/tests/scheduler-react-week.js.map +2 -2
  151. package/dist/scheduler/tests/scheduler-year.js +6 -9
  152. package/dist/scheduler/tests/scheduler-year.js.map +2 -2
  153. package/dist/scheduler/tests/scheduler.js +13 -19
  154. package/dist/scheduler/tests/scheduler.js.map +2 -2
  155. package/dist/slider/slider-tick.js +48 -0
  156. package/dist/slider/slider-tick.js.map +7 -0
  157. package/dist/slider/slider.spec.js +411 -0
  158. package/dist/slider/slider.spec.js.map +7 -0
  159. package/dist/slider/tests/slider-css-vars.js +300 -268
  160. package/dist/slider/tests/slider-css-vars.js.map +4 -4
  161. package/dist/slider/tests/slider-tick-absolute-position.js +155 -36
  162. package/dist/slider/tests/slider-tick-absolute-position.js.map +4 -4
  163. package/dist/slider/tests/slider.js +235 -209
  164. package/dist/slider/tests/slider.js.map +4 -4
  165. package/dist/spreadsheet/tests/spreadsheet-filter-menu.js +2 -2
  166. package/dist/spreadsheet/tests/spreadsheet-filter-menu.js.map +2 -2
  167. package/package.json +2 -2
  168. package/src/action-sheet/tests/action-sheet-calendar-infinite.tsx +605 -0
  169. package/src/bottom-nav/bottom-nav-item.tsx +62 -0
  170. package/src/bottom-nav/bottom-nav.spec.tsx +76 -0
  171. package/src/bottom-nav/index.ts +2 -0
  172. package/src/bottom-nav/tests/bottom-nav-colors.tsx +109 -325
  173. package/src/bottom-nav/tests/bottom-nav-items.tsx +12 -22
  174. package/src/bottom-nav/tests/bottom-nav-rtl.tsx +13 -37
  175. package/src/bottom-nav/tests/bottom-nav.tsx +29 -77
  176. package/src/breadcrumb/breadcrumb-container.tsx +36 -0
  177. package/src/breadcrumb/breadcrumb-input-container.tsx +22 -0
  178. package/src/breadcrumb/breadcrumb-item-text.tsx +32 -0
  179. package/src/breadcrumb/breadcrumb-item.tsx +34 -0
  180. package/src/breadcrumb/breadcrumb-link.tsx +55 -0
  181. package/src/breadcrumb/breadcrumb-root-item-container.tsx +22 -0
  182. package/src/breadcrumb/breadcrumb.spec.tsx +55 -0
  183. package/src/breadcrumb/index.ts +7 -0
  184. package/src/breadcrumb/tests/breadcrumb-rtl.tsx +275 -231
  185. package/src/breadcrumb/tests/breadcrumb.tsx +274 -231
  186. package/src/coloreditor/color-editor.spec.tsx +93 -0
  187. package/src/coloreditor/index.ts +1 -0
  188. package/src/coloreditor/tests/coloreditor-focused-colorgradient.tsx +2 -76
  189. package/src/coloreditor/tests/coloreditor-rtl.tsx +3 -107
  190. package/src/coloreditor/tests/coloreditor-states.tsx +2 -77
  191. package/src/coloreditor/tests/coloreditor-views.tsx +3 -107
  192. package/src/coloreditor/tests/coloreditor.tsx +2 -77
  193. package/src/colorgradient/color-contrast.tsx +44 -0
  194. package/src/colorgradient/color-gradient.spec.tsx +102 -0
  195. package/src/colorgradient/color-input.tsx +123 -0
  196. package/src/colorgradient/index.ts +4 -0
  197. package/src/colorgradient/tests/colorgradient-contrast.tsx +2 -83
  198. package/src/colorgradient/tests/colorgradient-draghandle.tsx +4 -146
  199. package/src/colorgradient/tests/colorgradient-modes.tsx +6 -214
  200. package/src/colorgradient/tests/colorgradient-rtl.tsx +2 -74
  201. package/src/colorgradient/tests/colorgradient-states.tsx +14 -51
  202. package/src/colorgradient/tests/colorgradient.tsx +2 -55
  203. package/src/colorpalette/colorpalette.spec.tsx +5 -5
  204. package/src/colorpicker/tests/colorpicker-dropdown.tsx +7 -184
  205. package/src/editor/tests/editor-table-wizard.tsx +280 -0
  206. package/src/expansion-panel/expansion-panel.spec.tsx +86 -0
  207. package/src/expansion-panel/index.ts +1 -0
  208. package/src/expansion-panel/tests/expansion-panel-rtl.tsx +48 -111
  209. package/src/expansion-panel/tests/expansion-panel.tsx +49 -111
  210. package/src/filemanager/tests/filemanager-contextmenu.tsx +9 -8
  211. package/src/filemanager/tests/filemanager-drag-hint.tsx +9 -8
  212. package/src/filemanager/tests/filemanager-gridview.tsx +17 -16
  213. package/src/filemanager/tests/filemanager-listview.tsx +17 -16
  214. package/src/filemanager/tests/filemanager-preview.tsx +25 -24
  215. package/src/grid/tests/grid-column-menu-rtl.tsx +45 -15
  216. package/src/grid/tests/grid-column-menu.tsx +45 -15
  217. package/src/index.ts +7 -4
  218. package/src/multiselecttree/index.ts +1 -0
  219. package/src/multiselecttree/multiselecttree.spec.tsx +150 -0
  220. package/src/multiselecttree/tests/multiselecttree-flat.tsx +179 -0
  221. package/src/multiselecttree/tests/multiselecttree-opened.tsx +119 -0
  222. package/src/multiselecttree/tests/multiselecttree-outline.tsx +179 -0
  223. package/src/multiselecttree/tests/multiselecttree-size.tsx +54 -0
  224. package/src/multiselecttree/tests/multiselecttree.tsx +179 -0
  225. package/src/pivotgrid/tests/pivotgrid-column-menus.tsx +24 -8
  226. package/src/scheduler/tests/scheduler-adaptive-agenda.tsx +13 -14
  227. package/src/scheduler/tests/scheduler-adaptive-day-resource-group.tsx +13 -14
  228. package/src/scheduler/tests/scheduler-adaptive-day.tsx +13 -14
  229. package/src/scheduler/tests/scheduler-adaptive-month.tsx +13 -14
  230. package/src/scheduler/tests/scheduler-angular-agenda-rtl.tsx +13 -17
  231. package/src/scheduler/tests/scheduler-angular-agenda.tsx +13 -17
  232. package/src/scheduler/tests/scheduler-angular-day-rtl.tsx +13 -17
  233. package/src/scheduler/tests/scheduler-angular-month-rtl.tsx +13 -17
  234. package/src/scheduler/tests/scheduler-angular-month.tsx +13 -17
  235. package/src/scheduler/tests/scheduler-angular-rtl.tsx +13 -17
  236. package/src/scheduler/tests/scheduler-angular.tsx +13 -17
  237. package/src/scheduler/tests/scheduler-flex-layout.tsx +10 -14
  238. package/src/scheduler/tests/scheduler-jquery-agenda.tsx +10 -14
  239. package/src/scheduler/tests/scheduler-jquery-month.tsx +10 -14
  240. package/src/scheduler/tests/scheduler-react-agenda.tsx +10 -14
  241. package/src/scheduler/tests/scheduler-react-day.tsx +10 -14
  242. package/src/scheduler/tests/scheduler-react-month.tsx +10 -14
  243. package/src/scheduler/tests/scheduler-react-timeline-multi.tsx +10 -14
  244. package/src/scheduler/tests/scheduler-react-timeline.tsx +19 -28
  245. package/src/scheduler/tests/scheduler-react-week.tsx +10 -14
  246. package/src/scheduler/tests/scheduler-year.tsx +9 -13
  247. package/src/scheduler/tests/scheduler.tsx +20 -27
  248. package/src/slider/index.ts +2 -0
  249. package/src/slider/slider-tick.tsx +52 -0
  250. package/src/slider/slider.spec.tsx +120 -0
  251. package/src/slider/tests/slider-css-vars.tsx +185 -349
  252. package/src/slider/tests/slider-tick-absolute-position.tsx +40 -64
  253. package/src/slider/tests/slider.tsx +118 -262
  254. package/src/spreadsheet/tests/spreadsheet-filter-menu.tsx +6 -2
  255. package/dist/editor/tests/editor-table-wizard-accessibility.js.map +0 -7
  256. 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
  </>