diff --git a/website/src/theme/DocBreadcrumbs/Items/Home/index.js b/website/src/theme/DocBreadcrumbs/Items/Home/index.js
new file mode 100644
index 00000000..da075124
--- /dev/null
+++ b/website/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('/docs');
+  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/website/src/theme/DocBreadcrumbs/Items/Home/styles.module.css b/website/src/theme/DocBreadcrumbs/Items/Home/styles.module.css
new file mode 100644
index 00000000..533d7648
--- /dev/null
+++ b/website/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/website/src/theme/DocBreadcrumbs/index.js b/website/src/theme/DocBreadcrumbs/index.js
new file mode 100644
index 00000000..252c184f
--- /dev/null
+++ b/website/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/website/src/theme/DocBreadcrumbs/styles.module.css b/website/src/theme/DocBreadcrumbs/styles.module.css
new file mode 100644
index 00000000..72da4671
--- /dev/null
+++ b/website/src/theme/DocBreadcrumbs/styles.module.css
@@ -0,0 +1,4 @@
+.breadcrumbsContainer {
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
+}