diff --git a/src/index.html b/src/index.html
index dbe57eb..d8e1ede 100644
--- a/src/index.html
+++ b/src/index.html
@@ -16,16 +16,14 @@
       </span>
 
       <span class="flex">
-        <div>
-          path / to / memes
-        </div>
+        <div data-ui="breadcrumbs" class="flex gap-0 before:content-['/']"></div>
         <button>Search</button>
       </span>
 
       <span class="flex">
-        <button>List</button>
-        <button>Panel</button>
-        <button>Column</button>
+        <button data-ui="view-list">List</button>
+        <button data-ui="view-panel">Panel</button>
+        <button data-ui="view-column">Column</button>
       </span>
     </header>
     <div class="h-full flex">
@@ -42,7 +40,7 @@
           <button data-ui="add-favourite">+ Add favourite</button>
         </li>
       </menu>
-      <main class="bg-red-500 h-full w-full" id="ui-files"></main>
+      <main class="bg-red-500 h-full w-full" data-ui="files"></main>
     </div>
 
   <template data-template="favourites">
@@ -51,5 +49,9 @@
       <button data-el="remove" class="w-8">x</button>
     </li>
   </template>
+
+  <template data-template="breadcrumbs">
+    <button data-el="action" class="after:content-['/']"></button>
+  </template>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
index ad1293e..c4b8748 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,9 @@
 import {renderFavourite} from "./parts/favourites.js";
+import {renderBreadcrumbs} from "./parts/breadcrumbs.js";
 
 
 async function Main() {
+    renderBreadcrumbs();
     renderFavourite();
 }
 
diff --git a/src/libs/navigation.js b/src/libs/navigation.js
index 14056c8..5c0e011 100644
--- a/src/libs/navigation.js
+++ b/src/libs/navigation.js
@@ -1,5 +1,5 @@
 import {homeDir} from "./path.js";
-import {readDir} from "./fs.js";
+import {exists, readDir} from "./fs.js";
 
 const eventBus = new Comment();
 
@@ -7,23 +7,48 @@ const NAVIGATE_EVENT = 'navigate';
 
 let currentDir = await homeDir();
 
+/**
+ * @param {function} callback
+ */
 export const onNavigate = (callback) => eventBus.addEventListener(
     NAVIGATE_EVENT,
     () => callback(currentDir)
 );
+
+/**
+ * @param {function} callback
+ */
 export const onceNavigate = (callback) => eventBus.addEventListener(
     NAVIGATE_EVENT,
     () => callback(currentDir),
     { once: true }
 );
-export const navigate = (toDir) => {
+
+/**
+ * @param {string} toDir
+ */
+export const navigate = async (toDir) => {
+    const dirExists =await exists(toDir);
+    if (!dirExists) throw new Error(`Target dir does not exists: ${toDir}`);
+
+    if (!toDir.endsWith('/')) {
+        toDir = toDir + '/'
+    }
+
     currentDir = toDir;
     eventBus.dispatchEvent(new CustomEvent(NAVIGATE_EVENT))
 }
 
+/**
+ * @returns {string}
+ */
+export const getCurrentDir = () => currentDir;
+
 const logDir = async () => console.log({
     currentDir,
     items: await readDir(currentDir)
 });
 
-onNavigate(logDir);
\ No newline at end of file
+onNavigate(logDir);
+
+logDir();
\ No newline at end of file
diff --git a/src/parts/breadcrumbs.js b/src/parts/breadcrumbs.js
new file mode 100644
index 0000000..c45c372
--- /dev/null
+++ b/src/parts/breadcrumbs.js
@@ -0,0 +1,28 @@
+import {getOneElementOrThrow} from "../libs/element.js";
+import {getCurrentDir, navigate, onceNavigate} from "../libs/navigation.js";
+import {sep} from "../libs/path.js";
+import {getTemplate} from "../libs/template.js";
+
+export const renderBreadcrumbs = () => {
+    const breadcrumbsEl = getOneElementOrThrow(document, '[data-ui=breadcrumbs]');
+    breadcrumbsEl.innerHTML = '';
+
+    const currentDir = getCurrentDir();
+    const currentDirSplit = currentDir.split(sep);
+
+    currentDirSplit.map((value, index, array) => {
+        if (value) {
+            const restSplit = [...array].reverse().splice(array.length - (index + 1)).reverse();
+            const path = restSplit.join(sep);
+
+            const template = getTemplate('breadcrumbs');
+            const actionEl = template.el('action');
+            actionEl.innerText = value;
+            actionEl.addEventListener('click', () => navigate(path));
+
+            breadcrumbsEl.appendChild(template.render());
+        }
+    });
+
+    onceNavigate(() => renderBreadcrumbs());
+}
\ No newline at end of file
diff --git a/src/parts/favourites.js b/src/parts/favourites.js
index 1cefcf3..c3cf51d 100644
--- a/src/parts/favourites.js
+++ b/src/parts/favourites.js
@@ -4,36 +4,31 @@ import {getTemplate} from "../libs/template.js";
 import {navigate} from "../libs/navigation.js";
 
 export const renderFavourite = () => {
-    const updateFavourites = (favouritesArray) => {
-        const favouriteList = getOneElementOrThrow(document, '[data-ui=favourites]');
+    const favouriteList = getOneElementOrThrow(document, '[data-ui=favourites]');
 
-        const addedItems = getElements(favouriteList, '[data-el=added]');
-        addedItems.forEach(addedItems => addedItems.remove());
-
-        favouritesArray.forEach(({ name, path, system }, index) => {
-            const template = getTemplate('favourites');
-            const actionEl = template.el('action');
-            actionEl.textContent = name;
-            actionEl.addEventListener('click', () => navigate(path));
-
-            const removeEl = template.el('remove');
-            if (system) {
-                removeEl.remove();
-            } else {
-                removeEl.addEventListener('click', () => {
-                    removeFavouriteByIndex(index);
-
-                    renderFavourite();
-                });
-            }
-
-
-            favouriteList.appendChild(template.render());
-        });
-    }
+    const addedItems = getElements(favouriteList, '[data-el=added]');
+    addedItems.forEach(addedItems => addedItems.remove());
 
     const favourites = getFavourites();
-    updateFavourites(favourites);
+    favourites.forEach(({ name, path, system }, index) => {
+        const template = getTemplate('favourites');
+        const actionEl = template.el('action');
+        actionEl.textContent = name;
+        actionEl.addEventListener('click', () => navigate(path));
+
+        const removeEl = template.el('remove');
+        if (system) {
+            removeEl.remove();
+        } else {
+            removeEl.addEventListener('click', () => {
+                removeFavouriteByIndex(index);
+
+                renderFavourite();
+            });
+        }
+
+        favouriteList.appendChild(template.render());
+    });
 
     const addEl = getOneElementOrThrow(document, '[data-ui=add-favourite]');