feat: enhance breadcrumb navigation with Shift+click functionality to open in sidebar (#4)

* feat: enhance breadcrumb navigation with Shift+click functionality to open in sidebar

* 1.1.0

* docs: add Slack badge to README for community engagement

Author: mdroidian

README.md

@@ -8,6 +8,7 @@
 you can jump back instantly and navigate your graph with confidence.**
 
 [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/RoamJS/breadcrumbs)
+[![Slack](https://img.shields.io/badge/Slack-%23roam--js-purple)](https://roamresearch.slack.com/archives/C016N2B66JU)
 
 ![](https://github.com/user-attachments/assets/bb192b0d-04ad-420f-909d-7dd9be71347c)
 
@@ -16,6 +17,7 @@ you can jump back instantly and navigate your graph with confidence.**
 - Tracks recently visited pages and block locations
 - Renders oldest-to-current breadcrumb trail in the top bar
 - Click any non-current breadcrumb to navigate back
+- Shift+click any non-current breadcrumb to open in the right sidebar
 - Distinguishes pages vs blocks with different styles
 - Supports Blueprint dark mode (`.bp3-dark`)
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "breadcrumbs",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Navigation breadcrumbs for Roam Research.",
   "main": "index.js",
   "scripts": {

package.json

@@ -1,5 +1,6 @@
 import { OnloadArgs } from "roamjs-components/types/native";
 import runExtension from "roamjs-components/util/runExtension";
+import openBlockInSidebar from "roamjs-components/writes/openBlockInSidebar";
 
 type LocationType = "page" | "block";
 
@@ -170,7 +171,7 @@ const truncateText = ({
   return `${cleaned.slice(0, maxLength - 1)}...`;
 };
 
-const navigateTo = ({
+const openInMainWindow = ({
   uid,
   type,
 }: {
@@ -185,6 +186,23 @@ const navigateTo = ({
   window.roamAlphaAPI.ui.mainWindow.openBlock({ block: { uid } });
 };
 
+const navigateTo = ({
+  uid,
+  type,
+  inSidebar,
+}: {
+  uid: string;
+  type: LocationType;
+  inSidebar: boolean;
+}): void => {
+  if (inSidebar) {
+    openBlockInSidebar(uid);
+    return;
+  }
+
+  openInMainWindow({ uid, type });
+};
+
 const createSeparatorElement = (): HTMLSpanElement => {
   const separator = document.createElement("span");
   separator.className = "breadcrumb-separator";
@@ -213,12 +231,25 @@ const createBreadcrumbElement = ({
   });
   element.title = stripMarkdown({ text: item.title });
   element.style.maxWidth = `${Math.max(truncateLength, 20)}ch`;
+  element.addEventListener("mousedown", (event: MouseEvent) => {
+    if (event.shiftKey) {
+      event.preventDefault();
+    }
+  });
 
   if (!isCurrent) {
-    element.addEventListener("click", (event) => {
+    element.addEventListener("click", (event: MouseEvent) => {
       event.preventDefault();
       event.stopPropagation();
-      navigateTo({ uid: item.uid, type: item.type });
+      if (event.shiftKey) {
+        // handle shift+click selecting text
+        window.getSelection()?.removeAllRanges();
+      }
+      navigateTo({
+        uid: item.uid,
+        type: item.type,
+        inSidebar: event.shiftKey,
+      });
     });
   }
 
@@ -358,6 +389,8 @@ const injectStyles = (): void => {
       white-space: nowrap;
       text-overflow: ellipsis;
       max-width: 200px;
+      user-select: none;
+      -webkit-user-select: none;
     }
 
     .breadcrumb-item:hover:not(.breadcrumb-current) {