diff --git a/app/components/Breadcrumb.tsx b/app/components/Breadcrumb.tsx
index fb19e8971..7ad14c482 100644
--- a/app/components/Breadcrumb.tsx
+++ b/app/components/Breadcrumb.tsx
@@ -6,14 +6,8 @@ import Flex from "~/components/Flex";
 import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
 import { MenuInternalLink } from "~/types";
 
-export type Crumb = {
-  title: React.ReactNode;
-  icon?: React.ReactNode;
-  to?: string;
-};
-
 type Props = {
-  items: Crumb[];
+  items: MenuInternalLink[];
   max?: number;
   children?: React.ReactNode;
   highlightFirstItem?: boolean;
@@ -21,7 +15,7 @@ type Props = {
 
 function Breadcrumb({ items, highlightFirstItem, children, max = 2 }: Props) {
   const totalItems = items.length;
-  const topLevelItems: Crumb[] = [...items];
+  const topLevelItems: MenuInternalLink[] = [...items];
   let overflowItems;
 
   // chop middle breadcrumbs and present a "..." menu instead
@@ -30,6 +24,8 @@ function Breadcrumb({ items, highlightFirstItem, children, max = 2 }: Props) {
     overflowItems = topLevelItems.splice(halfMax, totalItems - max);
 
     topLevelItems.splice(halfMax, 0, {
+      to: "",
+      type: "route",
       title: <BreadcrumbMenu items={overflowItems as MenuInternalLink[]} />,
     });
   }
diff --git a/app/components/DocumentBreadcrumb.tsx b/app/components/DocumentBreadcrumb.tsx
index 074509fd1..b23cdf0be 100644
--- a/app/components/DocumentBreadcrumb.tsx
+++ b/app/components/DocumentBreadcrumb.tsx
@@ -10,10 +10,10 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Document from "~/models/Document";
-import Breadcrumb, { Crumb } from "~/components/Breadcrumb";
+import Breadcrumb from "~/components/Breadcrumb";
 import CollectionIcon from "~/components/CollectionIcon";
 import useStores from "~/hooks/useStores";
-import { NavigationNode } from "~/types";
+import { MenuInternalLink, NavigationNode } from "~/types";
 import { collectionUrl } from "~/utils/routeHelpers";
 
 type Props = {
@@ -22,11 +22,12 @@ type Props = {
   onlyText?: boolean;
 };
 
-function useCategory(document: Document) {
+function useCategory(document: Document): MenuInternalLink | null {
   const { t } = useTranslation();
 
   if (document.isDeleted) {
     return {
+      type: "route",
       icon: <TrashIcon color="currentColor" />,
       title: t("Trash"),
       to: "/trash",
@@ -35,6 +36,7 @@ function useCategory(document: Document) {
 
   if (document.isArchived) {
     return {
+      type: "route",
       icon: <ArchiveIcon color="currentColor" />,
       title: t("Archive"),
       to: "/archive",
@@ -43,6 +45,7 @@ function useCategory(document: Document) {
 
   if (document.isDraft) {
     return {
+      type: "route",
       icon: <EditIcon color="currentColor" />,
       title: t("Drafts"),
       to: "/drafts",
@@ -51,6 +54,7 @@ function useCategory(document: Document) {
 
   if (document.isTemplate) {
     return {
+      type: "route",
       icon: <ShapesIcon color="currentColor" />,
       title: t("Templates"),
       to: "/templates",
@@ -66,16 +70,18 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
   const category = useCategory(document);
   const collection = collections.get(document.collectionId);
 
-  let collectionNode: Crumb;
+  let collectionNode: MenuInternalLink;
 
   if (collection) {
     collectionNode = {
+      type: "route",
       title: collection.name,
       icon: <CollectionIcon collection={collection} expanded />,
       to: collectionUrl(collection.url),
     };
   } else {
     collectionNode = {
+      type: "route",
       title: t("Deleted Collection"),
       icon: undefined,
       to: collectionUrl("deleted-collection"),
@@ -88,7 +94,7 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
   );
 
   const items = React.useMemo(() => {
-    const output: Crumb[] = [];
+    const output = [];
 
     if (category) {
       output.push(category);
@@ -96,10 +102,11 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
 
     output.push(collectionNode);
 
-    path.forEach((p: NavigationNode) => {
+    path.forEach((node: NavigationNode) => {
       output.push({
-        title: p.title,
-        to: p.url,
+        type: "route",
+        title: node.title,
+        to: node.url,
       });
     });
     return output;
@@ -113,10 +120,10 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
     return (
       <>
         {collection?.name}
-        {path.map((n: any) => (
-          <React.Fragment key={n.id}>
+        {path.map((node: NavigationNode) => (
+          <React.Fragment key={node.id}>
             <SmallSlash />
-            {n.title}
+            {node.title}
           </React.Fragment>
         ))}
       </>
diff --git a/app/scenes/Document/components/PublicBreadcrumb.tsx b/app/scenes/Document/components/PublicBreadcrumb.tsx
index 739d22327..f6c9dbfda 100644
--- a/app/scenes/Document/components/PublicBreadcrumb.tsx
+++ b/app/scenes/Document/components/PublicBreadcrumb.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import Breadcrumb from "~/components/Breadcrumb";
-import { NavigationNode } from "~/types";
+import { MenuInternalLink, NavigationNode } from "~/types";
 
 type Props = {
   documentId: string;
@@ -44,12 +44,12 @@ const PublicBreadcrumb = ({
   sharedTree,
   children,
 }: Props) => {
-  const items = React.useMemo(
+  const items: MenuInternalLink[] = React.useMemo(
     () =>
       pathToDocument(sharedTree, documentId)
         .slice(0, -1)
         .map((item) => {
-          return { ...item, to: `/share/${shareId}${item.url}` };
+          return { ...item, type: "route", to: `/share/${shareId}${item.url}` };
         }),
     [sharedTree, shareId, documentId]
   );