diff --git a/packages/docusaurus-plugin-content-docs/src/sidebars/generator.ts b/packages/docusaurus-plugin-content-docs/src/sidebars/generator.ts
index d78aab9c92a9..ef09ca695143 100644
--- a/packages/docusaurus-plugin-content-docs/src/sidebars/generator.ts
+++ b/packages/docusaurus-plugin-content-docs/src/sidebars/generator.ts
@@ -99,12 +99,11 @@ Available doc IDs:
     // autogenerated sidebar item)
     // autogenDir=a/b and docDir=a/b/c/d => returns [c, d]
     // autogenDir=a/b and docDir=a/b => returns []
-    // TODO: try to use path.relative()
     function getRelativeBreadcrumb(doc: SidebarItemsGeneratorDoc): string[] {
       return autogenDir === doc.sourceDirName
         ? []
-        : doc.sourceDirName
-            .replace(addTrailingSlash(autogenDir), '')
+        : path.posix
+            .relative(autogenDir, doc.sourceDirName)
             .split(BreadcrumbSeparator);
     }
     const treeRoot: Dir = {};