diff --git a/src/api.js b/src/api.js
index 674044e6d..a5ae5b36d 100644
--- a/src/api.js
+++ b/src/api.js
@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
 
 import Toast from './components/Toast';
 
-import { DEFAULT_ERROR_TOAST_MSG } from './utils';
+import { DEFAULT_ERROR_TOAST_MSG, parseDirectoryFile, getNavFolderDropdownFromFolderOrder } from './utils';
 
 import elementStyles from './styles/isomer-cms/Elements.module.scss';
 
@@ -53,11 +53,17 @@ const getEditNavBarData = async(siteName) => {
         const resourceResp = await axios.get(`${BACKEND_URL}/sites/${siteName}/resources`)
         resourceContent = resourceResp.data
         const foldersResp = await axios.get(`${BACKEND_URL}/sites/${siteName}/folders/all`)
-        foldersContent = foldersResp.data
         
-        if (foldersContent && foldersContent.allFolderContent) {
+        if (foldersResp.data && foldersResp.data.allFolderContent) {
+            // parse directory files
+            foldersContent = foldersResp.data.allFolderContent.reduce((acc, currFolder) => {
+                const folderOrder = parseDirectoryFile(currFolder.content)
+                acc[currFolder.name.slice(1)] = getNavFolderDropdownFromFolderOrder(folderOrder)
+                return acc
+            }, {})
+
             collectionContent = {
-                collections: foldersContent.allFolderContent.map((folder) => folder.name.slice(1)),
+                collections: foldersResp.data.allFolderContent.map((folder) => folder.name.slice(1)),
             }
         }
 
diff --git a/src/layouts/EditNavBar.jsx b/src/layouts/EditNavBar.jsx
index 67c4a67d5..5dd45644b 100644
--- a/src/layouts/EditNavBar.jsx
+++ b/src/layouts/EditNavBar.jsx
@@ -35,6 +35,7 @@ const EditNavBar =  ({ match }) => {
   const [links, setLinks] = useState([])
   const [originalNav, setOriginalNav] = useState()
   const [collections, setCollections] = useState([])
+  const [folderDropdowns, setFolderDropdowns] = useState({})
   const [options, setOptions] = useState([])
   const [displayLinks, setDisplayLinks] = useState([])
   const [displaySublinks, setDisplaySublinks] = useState([])
@@ -141,6 +142,7 @@ const EditNavBar =  ({ match }) => {
         navContent,
         navSha,
         collectionContent,
+        foldersContent,
         resourceContent,
       } = navigationContents
 
@@ -178,6 +180,7 @@ const EditNavBar =  ({ match }) => {
         setDisplayLinks(initialDisplayLinks)
         setDisplaySublinks(initialDisplaySublinks)
         setCollections(initialCollections)
+        setFolderDropdowns(foldersContent)
         setOptions(initialOptions)
         setResources(initialResource.map(resource => deslugifyDirectory(resource.dirName)))
         setOriginalNav(navContent)
@@ -609,7 +612,7 @@ const EditNavBar =  ({ match }) => {
             {/* TODO: update collectionInfo */}
             <TemplateNavBar
               links={links}
-              collectionInfo={null}
+              collectionInfo={folderDropdowns}
               resources={resources}
             />
           </div>
diff --git a/src/templates/NavBar.jsx b/src/templates/NavBar.jsx
index f989f92df..404a8097b 100644
--- a/src/templates/NavBar.jsx
+++ b/src/templates/NavBar.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const NavDropdownSection = ({ children, link, linkIndex }) => (
+const NavDropdownSection = ({ children, link }) => (
   <div className="navbar-item has-dropdown is-hoverable">
       <a className="navbar-link is-uppercase" href="/" onClick={(event) => event.preventDefault()}>
           { link.title }