diff --git a/apps/client/src/widgets/layout/Breadcrumb.css b/apps/client/src/widgets/layout/Breadcrumb.css
index 494483e0d..76d5095c0 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.css
+++ b/apps/client/src/widgets/layout/Breadcrumb.css
@@ -21,10 +21,10 @@
         &:hover {
             color: var(--custom-color, inherit);
         }
+    }
 
-        &.archived {
-            opacity: 0.6;
-        }
+    .archived {
+        opacity: 0.6;
     }
 
     > span,
diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index c4e51b512..aa7e484dc 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -199,7 +199,7 @@ function BreadcrumbSeparatorDropdownContent({ notePath, noteContext, activeNoteP
                 return <li key={note.noteId}>
                     <FormListItem
                         icon={note.getIcon()}
-                        className={note.getColorClass()}
+                        className={clsx(note.getColorClass(), note.isArchived && "archived")}
                         onClick={() => noteContext?.setNote(childNotePath)}
                     >
                         {childNotePath !== activeNotePath