diff --git a/scripts/settings/autogenerate-settings.sh b/scripts/settings/autogenerate-settings.sh
index c9467f26b5a..2cf8870ece5 100755
--- a/scripts/settings/autogenerate-settings.sh
+++ b/scripts/settings/autogenerate-settings.sh
@@ -85,3 +85,4 @@ if [ -f ./clickhouse ]; then
 fi
 
 echo "[$SCRIPT_NAME] Autogenerating settings completed"
+
diff --git a/src/components/BlogBreadcrumbs/BlogBreadcrumbs.js b/src/components/BlogBreadcrumbs/BlogBreadcrumbs.js
index 80a3f5d35ea..e5438311bd1 100644
--- a/src/components/BlogBreadcrumbs/BlogBreadcrumbs.js
+++ b/src/components/BlogBreadcrumbs/BlogBreadcrumbs.js
@@ -78,3 +78,4 @@ const BlogBreadcrumbs = () => {
 }
 
 export default BlogBreadcrumbs
+
diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
index bca8927f901..2221e03370e 100644
--- a/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -65,3 +65,4 @@ export const ButtonGroup = ({
 type ButtonPosition = "left" | "center" | "right";
 
 export default ButtonGroup;
+
diff --git a/src/components/ButtonGroup/styles.module.css b/src/components/ButtonGroup/styles.module.css
index 8f085a65cc4..b525c24351a 100644
--- a/src/components/ButtonGroup/styles.module.css
+++ b/src/components/ButtonGroup/styles.module.css
@@ -101,3 +101,4 @@
     background: #EDEEF3;
     border-radius: 4px;
 }
+
diff --git a/src/css/custom.scss b/src/css/custom.scss
index 0888434e2f7..1294427b14d 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -1266,3 +1266,4 @@ input::-ms-input-placeholder { /* Microsoft Edge */
 .blog-list-page .margin-bottom--xl, .blog-tags-post-list-page .margin-bottom--xl {
   margin-bottom: 1rem !important;
 }
+
diff --git a/src/theme/BlogTagsListPage/index.js b/src/theme/BlogTagsListPage/index.js
index 06fed05b354..2dd5f99e7c7 100644
--- a/src/theme/BlogTagsListPage/index.js
+++ b/src/theme/BlogTagsListPage/index.js
@@ -48,3 +48,4 @@ export default function BlogTagsListPage({tags, sidebar}) {
     </HtmlClassNameProvider>
   );
 }
+
diff --git a/src/theme/BlogTagsListPage/styles.module.css b/src/theme/BlogTagsListPage/styles.module.css
index b5f14225e68..a72211f8513 100644
--- a/src/theme/BlogTagsListPage/styles.module.css
+++ b/src/theme/BlogTagsListPage/styles.module.css
@@ -1,3 +1,4 @@
 .kbTitle{
     margin-bottom: 25px;
 }
+
diff --git a/src/theme/BlogTagsPostsPage/index.js b/src/theme/BlogTagsPostsPage/index.js
index 3fe9c53b40a..a2f34ffde20 100644
--- a/src/theme/BlogTagsPostsPage/index.js
+++ b/src/theme/BlogTagsPostsPage/index.js
@@ -72,3 +72,4 @@ export default function BlogTagsPostsPage(props) {
     </HtmlClassNameProvider>
   );
 }
+
diff --git a/src/theme/BlogTagsPostsPage/styles.module.css b/src/theme/BlogTagsPostsPage/styles.module.css
index fdbfcaa678b..ef4c9c97043 100644
--- a/src/theme/BlogTagsPostsPage/styles.module.css
+++ b/src/theme/BlogTagsPostsPage/styles.module.css
@@ -8,3 +8,4 @@
 .kbTitle {
     margin-bottom: 25px;
 }
+
diff --git a/src/theme/DocBreadcrumbs/Items/Home/index.js b/src/theme/DocBreadcrumbs/Items/Home/index.js
new file mode 100644
index 00000000000..d0d7c7a3acd
--- /dev/null
+++ b/src/theme/DocBreadcrumbs/Items/Home/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import {translate} from '@docusaurus/Translate';
+import IconHome from '@theme/Icon/Home';
+import styles from './styles.module.css';
+export default function HomeBreadcrumbItem() {
+  const homeHref = useBaseUrl('/');
+  return (
+    <li className="breadcrumbs__item">
+      <Link
+        aria-label={translate({
+          id: 'theme.docs.breadcrumbs.home',
+          message: 'Home page',
+          description: 'The ARIA label for the home page in the breadcrumbs',
+        })}
+        className="breadcrumbs__link"
+        href={homeHref}>
+        <IconHome className={styles.breadcrumbHomeIcon} />
+      </Link>
+    </li>
+  );
+}
diff --git a/src/theme/DocBreadcrumbs/Items/Home/styles.module.css b/src/theme/DocBreadcrumbs/Items/Home/styles.module.css
new file mode 100644
index 00000000000..533d764872f
--- /dev/null
+++ b/src/theme/DocBreadcrumbs/Items/Home/styles.module.css
@@ -0,0 +1,7 @@
+.breadcrumbHomeIcon {
+  position: relative;
+  top: 1px;
+  vertical-align: top;
+  height: 1.1rem;
+  width: 1.1rem;
+}
diff --git a/src/theme/DocBreadcrumbs/index.js b/src/theme/DocBreadcrumbs/index.js
new file mode 100644
index 00000000000..252c184f905
--- /dev/null
+++ b/src/theme/DocBreadcrumbs/index.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useSidebarBreadcrumbs} from '@docusaurus/plugin-content-docs/client';
+import {useHomePageRoute} from '@docusaurus/theme-common/internal';
+import Link from '@docusaurus/Link';
+import {translate} from '@docusaurus/Translate';
+import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
+import styles from './styles.module.css';
+// TODO move to design system folder
+function BreadcrumbsItemLink({children, href, isLast}) {
+  const className = 'breadcrumbs__link';
+  if (isLast) {
+    return (
+      <span className={className} itemProp="name">
+        {children}
+      </span>
+    );
+  }
+  return href ? (
+    <Link className={className} href={href} itemProp="item">
+      <span itemProp="name">{children}</span>
+    </Link>
+  ) : (
+    // TODO Google search console doesn't like breadcrumb items without href.
+    // The schema doesn't seem to require `id` for each `item`, although Google
+    // insist to infer one, even if it's invalid. Removing `itemProp="item
+    // name"` for now, since I don't know how to properly fix it.
+    // See https://github.com/facebook/docusaurus/issues/7241
+    <span className={className}>{children}</span>
+  );
+}
+// TODO move to design system folder
+function BreadcrumbsItem({children, active, index, addMicrodata}) {
+  return (
+    <li
+      {...(addMicrodata && {
+        itemScope: true,
+        itemProp: 'itemListElement',
+        itemType: 'https://schema.org/ListItem',
+      })}
+      className={clsx('breadcrumbs__item', {
+        'breadcrumbs__item--active': active,
+      })}>
+      {children}
+      <meta itemProp="position" content={String(index + 1)} />
+    </li>
+  );
+}
+export default function DocBreadcrumbs() {
+  const breadcrumbs = useSidebarBreadcrumbs();
+  const homePageRoute = useHomePageRoute();
+  if (!breadcrumbs) {
+    return null;
+  }
+  return (
+    <nav
+      className={clsx(
+        ThemeClassNames.docs.docBreadcrumbs,
+        styles.breadcrumbsContainer,
+      )}
+      aria-label={translate({
+        id: 'theme.docs.breadcrumbs.navAriaLabel',
+        message: 'Breadcrumbs',
+        description: 'The ARIA label for the breadcrumbs',
+      })}>
+      <ul
+        className="breadcrumbs"
+        itemScope
+        itemType="https://schema.org/BreadcrumbList">
+        {homePageRoute && <HomeBreadcrumbItem />}
+        {breadcrumbs.map((item, idx) => {
+          const isLast = idx === breadcrumbs.length - 1;
+          const href =
+            item.type === 'category' && item.linkUnlisted
+              ? undefined
+              : item.href;
+          return (
+            <BreadcrumbsItem
+              key={idx}
+              active={isLast}
+              index={idx}
+              addMicrodata={!!href}>
+              <BreadcrumbsItemLink href={href} isLast={isLast}>
+                {item.label}
+              </BreadcrumbsItemLink>
+            </BreadcrumbsItem>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}
diff --git a/src/theme/DocBreadcrumbs/styles.module.css b/src/theme/DocBreadcrumbs/styles.module.css
new file mode 100644
index 00000000000..cf3677c42cf
--- /dev/null
+++ b/src/theme/DocBreadcrumbs/styles.module.css
@@ -0,0 +1,5 @@
+
+.breadcrumbsContainer {
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
+}