diff --git a/digital-course-file/src/user/FolderNav.js b/digital-course-file/src/user/FolderNav.js
new file mode 100644
index 0000000000000000000000000000000000000000..ca6738406fef6a74b981c907cd2e2e942c8a63d8
--- /dev/null
+++ b/digital-course-file/src/user/FolderNav.js
@@ -0,0 +1,46 @@
+import { react  } from "react";
+import { Breadcrumb } from "react-bootstrap";
+import { Link } from "react-router-dom";
+import { ROOT_FOLDER } from "../hooks/useFolder";
+
+export default function FolderNav( {currentFolder} ) {
+
+    let path = currentFolder === ROOT_FOLDER ? [] : [ROOT_FOLDER]
+    if (currentFolder){ 
+        path = [...path,...currentFolder.path];
+    }
+
+    
+    return(
+        <Breadcrumb
+            className="flex-grow-1"
+            listProps = {{ className : "bg-white pl-0 m-0"}}
+        >
+            {path.map((folder,index) => (
+                <Breadcrumb.Item 
+                    key={folder.id}
+                    linkAs ={Link}
+                    linkProps = {{
+                        to : folder.id ? `/folder/${folder.id}` : "/",
+                    }}
+                    className="text-truncate d-inline-block"
+                    style = { {maxWidth : "175px"} }
+                >
+                    {folder.name}
+                </Breadcrumb.Item>
+            ))}
+            { currentFolder && (
+                <Breadcrumb.Item 
+                    className="text-truncate d-inline-block"
+                    style = { {maxWidth : "200px"} }
+                    active
+                >
+                    {currentFolder.name}
+                </Breadcrumb.Item>
+            )
+
+            }
+        </Breadcrumb>
+    );
+
+}
\ No newline at end of file