diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md
index 03d3ccea789..6bc347bce68 100644
--- a/docs/api/breadcrumbs.md
+++ b/docs/api/breadcrumbs.md
@@ -73,17 +73,17 @@ import PopoverOnClick from '@site/static/usage/breadcrumbs/collapsing-items/popo
 
 <PopoverOnClick />
 
-## Styling
+## Theming
 
-## Color Property
+### Colors
 
-import ColorProp from '@site/static/usage/breadcrumbs/styling/color/index.md';
+import Colors from '@site/static/usage/breadcrumbs/theming/colors/index.md';
 
-<ColorProp />
+<Colors />
 
-## CSS Properties
+### CSS Custom Properties
 
-import CSSProps from '@site/static/usage/breadcrumbs/styling/css-props/index.md';
+import CSSProps from '@site/static/usage/breadcrumbs/theming/css-properties/index.md';
 
 <CSSProps />
 
@@ -104,4 +104,4 @@ import CSSProps from '@site/static/usage/breadcrumbs/styling/css-props/index.md'
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/breadcrumbs/styling/color/angular.md b/static/usage/breadcrumbs/theming/colors/angular.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/color/angular.md
rename to static/usage/breadcrumbs/theming/colors/angular.md
diff --git a/static/usage/breadcrumbs/styling/color/demo.html b/static/usage/breadcrumbs/theming/colors/demo.html
similarity index 100%
rename from static/usage/breadcrumbs/styling/color/demo.html
rename to static/usage/breadcrumbs/theming/colors/demo.html
diff --git a/static/usage/breadcrumbs/styling/color/index.md b/static/usage/breadcrumbs/theming/colors/index.md
similarity index 82%
rename from static/usage/breadcrumbs/styling/color/index.md
rename to static/usage/breadcrumbs/theming/colors/index.md
index f5113c6ca29..efad30bbf65 100644
--- a/static/usage/breadcrumbs/styling/color/index.md
+++ b/static/usage/breadcrumbs/theming/colors/index.md
@@ -7,5 +7,5 @@ import angular from './angular.md';
 
 <Playground
   code={{ javascript, react, vue, angular }}
-  src="usage/breadcrumbs/styling/color/demo.html"
-/>
\ No newline at end of file
+  src="usage/breadcrumbs/theming/colors/demo.html"
+/>
diff --git a/static/usage/breadcrumbs/styling/color/javascript.md b/static/usage/breadcrumbs/theming/colors/javascript.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/color/javascript.md
rename to static/usage/breadcrumbs/theming/colors/javascript.md
diff --git a/static/usage/breadcrumbs/styling/color/react.md b/static/usage/breadcrumbs/theming/colors/react.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/color/react.md
rename to static/usage/breadcrumbs/theming/colors/react.md
diff --git a/static/usage/breadcrumbs/styling/color/vue.md b/static/usage/breadcrumbs/theming/colors/vue.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/color/vue.md
rename to static/usage/breadcrumbs/theming/colors/vue.md
diff --git a/static/usage/breadcrumbs/styling/css-props/angular/angular_css.md b/static/usage/breadcrumbs/theming/css-properties/angular/angular_css.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/css-props/angular/angular_css.md
rename to static/usage/breadcrumbs/theming/css-properties/angular/angular_css.md
diff --git a/static/usage/breadcrumbs/styling/css-props/angular/angular_html.md b/static/usage/breadcrumbs/theming/css-properties/angular/angular_html.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/css-props/angular/angular_html.md
rename to static/usage/breadcrumbs/theming/css-properties/angular/angular_html.md
diff --git a/static/usage/breadcrumbs/styling/css-props/demo.html b/static/usage/breadcrumbs/theming/css-properties/demo.html
similarity index 100%
rename from static/usage/breadcrumbs/styling/css-props/demo.html
rename to static/usage/breadcrumbs/theming/css-properties/demo.html
diff --git a/static/usage/breadcrumbs/styling/css-props/index.md b/static/usage/breadcrumbs/theming/css-properties/index.md
similarity index 91%
rename from static/usage/breadcrumbs/styling/css-props/index.md
rename to static/usage/breadcrumbs/theming/css-properties/index.md
index 579f8373ba6..4a632fce7a3 100644
--- a/static/usage/breadcrumbs/styling/css-props/index.md
+++ b/static/usage/breadcrumbs/theming/css-properties/index.md
@@ -26,5 +26,5 @@ import angularCSS from './angular/angular_css.md';
       },
     },
   }}
-  src="usage/breadcrumbs/styling/css-props/demo.html"
+  src="usage/breadcrumbs/theming/css-properties/demo.html"
 />
diff --git a/static/usage/breadcrumbs/styling/css-props/javascript.md b/static/usage/breadcrumbs/theming/css-properties/javascript.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/css-props/javascript.md
rename to static/usage/breadcrumbs/theming/css-properties/javascript.md
diff --git a/static/usage/breadcrumbs/styling/css-props/react/react_css.md b/static/usage/breadcrumbs/theming/css-properties/react/react_css.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/css-props/react/react_css.md
rename to static/usage/breadcrumbs/theming/css-properties/react/react_css.md
diff --git a/static/usage/breadcrumbs/styling/css-props/react/react_ts.md b/static/usage/breadcrumbs/theming/css-properties/react/react_ts.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/css-props/react/react_ts.md
rename to static/usage/breadcrumbs/theming/css-properties/react/react_ts.md
diff --git a/static/usage/breadcrumbs/styling/css-props/vue.md b/static/usage/breadcrumbs/theming/css-properties/vue.md
similarity index 100%
rename from static/usage/breadcrumbs/styling/css-props/vue.md
rename to static/usage/breadcrumbs/theming/css-properties/vue.md