diff --git a/apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx b/apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx
index e543966c3f..b1b3ae4fa0 100644
--- a/apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx
+++ b/apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx
@@ -8,9 +8,10 @@ import {
   Tooltip,
 } from "@blueprintjs/core";
 import React, { useState } from "react";
-import getDiscourseNodes from "~/utils/getDiscourseNodes";
+import getDiscourseNodes, {
+  excludeDefaultNodes,
+} from "~/utils/getDiscourseNodes";
 import refreshConfigTree from "~/utils/refreshConfigTree";
-import type { CustomField } from "roamjs-components/components/ConfigPanels/types";
 import posthog from "posthog-js";
 import getDiscourseRelations, {
   type DiscourseRelation,
@@ -24,20 +25,12 @@ import {
 } from "./utils/accessors";
 import { GLOBAL_KEYS } from "./utils/settingKeys";
 import { invalidateDiscourseNodeTypeCaches } from "~/utils/discourseNodeTypeCache";
+import { useSettingsNav } from "./navigation/SettingsNavContext";
 
-type DiscourseNodeConfigPanelProps = React.ComponentProps<
-  CustomField["options"]["component"]
-> & {
-  isPopup?: boolean;
-  setSelectedTabId: (id: string) => void;
-};
-
-const DiscourseNodeConfigPanel: React.FC<DiscourseNodeConfigPanelProps> = ({
-  isPopup,
-  setSelectedTabId,
-}) => {
+const DiscourseNodeConfigPanel: React.FC = () => {
+  const { push } = useSettingsNav();
   const [nodes, setNodes] = useState(() =>
-    getDiscourseNodes().filter((n) => n.backedBy === "user"),
+    getDiscourseNodes().filter(excludeDefaultNodes),
   );
   const [label, setLabel] = useState("");
   const [isCreating, setIsCreating] = useState(false);
@@ -52,11 +45,8 @@ const DiscourseNodeConfigPanel: React.FC<DiscourseNodeConfigPanelProps> = ({
   >([]);
   const [nodeTypeIdToDelete, setNodeTypeIdToDelete] = useState<string>("");
   const navigateToNode = (uid: string) => {
-    if (isPopup) {
-      setSelectedTabId(uid);
-    } else {
-      window.roamAlphaAPI.ui.mainWindow.openPage({ page: { uid } });
-    }
+    push(uid);
+    posthog.capture("Settings: Node Type Opened", { nodeTypeUid: uid });
   };
 
   const createNodeType = async (): Promise<void> => {
diff --git a/apps/roam/src/components/settings/GrammarNodesRoute.tsx b/apps/roam/src/components/settings/GrammarNodesRoute.tsx
new file mode 100644
index 0000000000..d480a1ec13
--- /dev/null
+++ b/apps/roam/src/components/settings/GrammarNodesRoute.tsx
@@ -0,0 +1,55 @@
+import React, { useEffect } from "react";
+import { OnloadArgs } from "roamjs-components/types";
+import getDiscourseNodes, {
+  excludeDefaultNodes,
+} from "~/utils/getDiscourseNodes";
+import { useSettingsNav } from "./navigation/SettingsNavContext";
+import SettingsPageHeader from "./navigation/SettingsPageHeader";
+import DiscourseNodeConfigPanel from "./DiscourseNodeConfigPanel";
+import NodeConfig from "./NodeConfig";
+
+const NODES_ANCESTOR_LABELS = ["Grammar"] as const;
+
+const GrammarNodesRoute = ({
+  onloadArgs,
+}: {
+  onloadArgs: OnloadArgs;
+}): JSX.Element => {
+  const { segments, goToDepth } = useSettingsNav();
+  const nodes = getDiscourseNodes().filter(excludeDefaultNodes);
+
+  const [nodeTypeUid] = segments;
+  const node = nodeTypeUid
+    ? nodes.find((n) => n.type === nodeTypeUid)
+    : undefined;
+
+  // A deleted node type or stale deep link resolves to nothing; return to the list.
+  const isStalePath = Boolean(nodeTypeUid) && !node;
+  useEffect(() => {
+    if (isStalePath) goToDepth(0);
+  }, [isStalePath, goToDepth]);
+
+  const resolveLabel = (segment: string): string =>
+    nodes.find((n) => n.type === segment)?.text ?? segment;
+
+  return (
+    <div className="flex h-full flex-col">
+      <SettingsPageHeader
+        ancestorLabels={NODES_ANCESTOR_LABELS}
+        rootLabel="Nodes"
+        resolveLabel={resolveLabel}
+      />
+      <div className="min-h-0 flex-auto overflow-y-auto">
+        {node ? (
+          <NodeConfig node={node} onloadArgs={onloadArgs} />
+        ) : (
+          <div className="p-1">
+            <DiscourseNodeConfigPanel />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default GrammarNodesRoute;
diff --git a/apps/roam/src/components/settings/Settings.tsx b/apps/roam/src/components/settings/Settings.tsx
index 1355aebf6c..9bb230270d 100644
--- a/apps/roam/src/components/settings/Settings.tsx
+++ b/apps/roam/src/components/settings/Settings.tsx
@@ -1,4 +1,11 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
 import { OnloadArgs } from "roamjs-components/types";
 import {
   Classes,
@@ -16,11 +23,6 @@ import discourseConfigRef from "~/utils/discourseConfigRef";
 import DiscourseGraphExport from "./ExportSettings";
 import QuerySettings from "./QuerySettings";
 import AdminPanel from "./AdminPanel";
-import DiscourseNodeConfigPanel from "./DiscourseNodeConfigPanel";
-import getDiscourseNodes, {
-  excludeDefaultNodes,
-} from "~/utils/getDiscourseNodes";
-import NodeConfig from "./NodeConfig";
 import PreferencesGeneral from "./PreferencesGeneral";
 import PreferencesStyling from "./PreferencesStyling";
 import LeftSidebarSettings from "./LeftSidebarSettings";
@@ -32,7 +34,14 @@ import { getVersionWithDate } from "~/utils/getVersion";
 import posthog from "posthog-js";
 import { bulkReadSettings } from "./utils/accessors";
 import { onSettingChange, settingKeys } from "./utils/settingsEmitter";
-import { SETTINGS_TAB_IDS, resolveSettingsTabId } from "./utils/settingsTabs";
+import { SETTINGS_TAB_IDS } from "./utils/settingsTabs";
+import {
+  resolveInitialSettingsPath,
+  settingsNavReducer,
+  tabIdOf,
+} from "./utils/settingsNavigation";
+import { SettingsNavProvider } from "./navigation/SettingsNavContext";
+import GrammarNodesRoute from "./GrammarNodesRoute";
 
 const SectionHeader = ({ children }: { children: React.ReactNode }) => (
   <div className="bp3-tab-copy mt-4 cursor-default select-none text-lg font-semibold text-neutral-dark">
@@ -77,10 +86,15 @@ export const SettingsDialog = ({
   const relationsNode = grammarNode?.children.find(
     (node) => node.text === "relations",
   );
-  const nodesNode = grammarNode?.children.find((node) => node.text === "nodes");
-  const nodes = getDiscourseNodes().filter(excludeDefaultNodes);
-  const [activeTabId, setActiveTabId] = useState<TabId>(() =>
-    resolveSettingsTabId(selectedTabId),
+  const [path, dispatch] = useReducer(
+    settingsNavReducer,
+    selectedTabId,
+    resolveInitialSettingsPath,
+  );
+  const activeTabId = tabIdOf(path);
+  const selectTab = useCallback(
+    (tabId: string) => dispatch({ type: "select-tab", tabId }),
+    [],
   );
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const settings = useMemo(() => bulkReadSettings(), [activeTabId]);
@@ -103,15 +117,14 @@ export const SettingsDialog = ({
   const { versionStamp } = getVersionWithDate();
   const openAdminPanel = (): void => {
     setShowAdminPanel(true);
-    setActiveTabId(SETTINGS_TAB_IDS.admin);
+    selectTab(SETTINGS_TAB_IDS.admin);
     posthog.capture("Settings: Admin Panel Opened from Footer");
   };
 
+  const initialTabId = useRef(activeTabId).current;
   useEffect(() => {
-    posthog.capture("Settings: Dialog Opened", {
-      initialTabId: String(resolveSettingsTabId(selectedTabId)),
-    });
-  }, [selectedTabId]);
+    posthog.capture("Settings: Dialog Opened", { initialTabId });
+  }, [initialTabId]);
 
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
@@ -119,14 +132,14 @@ export const SettingsDialog = ({
         e.stopPropagation();
         e.preventDefault();
         setShowAdminPanel(true);
-        setActiveTabId(SETTINGS_TAB_IDS.admin);
+        selectTab(SETTINGS_TAB_IDS.admin);
         posthog.capture("Settings: Admin Panel Opened via Shortcut");
       }
     };
 
     window.addEventListener("keydown", handleKeyPress);
     return () => window.removeEventListener("keydown", handleKeyPress);
-  }, []);
+  }, [selectTab]);
   return (
     <Dialog
       isOpen={isOpen}
@@ -169,7 +182,7 @@ export const SettingsDialog = ({
         <Tabs
           className="dg-settings-tabs flex h-full"
           onChange={(id) => {
-            setActiveTabId(id);
+            selectTab(String(id));
             posthog.capture("Settings: Tab Opened", {
               tabId: String(id),
             });
@@ -243,16 +256,10 @@ export const SettingsDialog = ({
           <Tab
             id={SETTINGS_TAB_IDS.grammarNodes}
             title="Nodes"
-            className="overflow-y-auto"
             panel={
-              <DiscourseNodeConfigPanel
-                title="Nodes"
-                uid={nodesNode?.uid || ""}
-                parentUid={grammarNode?.uid || ""}
-                defaultValue={[]}
-                setSelectedTabId={setActiveTabId}
-                isPopup={true}
-              />
+              <SettingsNavProvider path={path} dispatch={dispatch}>
+                <GrammarNodesRoute onloadArgs={onloadArgs} />
+              </SettingsNavProvider>
             }
           />
           <Tab
@@ -268,16 +275,6 @@ export const SettingsDialog = ({
               />
             }
           />
-          <SectionHeader>Node types</SectionHeader>
-          {nodes.map((n) => (
-            <Tab
-              key={n.type}
-              id={n.type}
-              title={n.text}
-              className="overflow-y-auto"
-              panel={<NodeConfig node={n} onloadArgs={onloadArgs} />}
-            />
-          ))}
           <SectionHeader>Advanced</SectionHeader>
           <Tab
             id={SETTINGS_TAB_IDS.advancedQueries}
diff --git a/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx b/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx
index 3e0fd8aa63..7293aad8ae 100644
--- a/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx
+++ b/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx
@@ -16,7 +16,8 @@ import type { DiscourseNodeBaseProps } from "./BlockPropSettingPanels";
 const DEBOUNCE_MS = 250;
 const TEMPLATE_BUFFER_TEXT = "Template";
 
-type DualWriteBlocksPanelProps = DiscourseNodeBaseProps & {
+type DualWriteBlocksPanelProps = Omit<DiscourseNodeBaseProps, "title"> & {
+  title?: string;
   uid: string;
   defaultValue?: InputTextNode[];
 };
@@ -191,10 +192,12 @@ const DualWriteBlocksPanel = ({
 
   return (
     <>
-      <Label>
-        {title}
-        <Description description={description} />
-      </Label>
+      {title ? (
+        <Label>
+          {title}
+          <Description description={description} />
+        </Label>
+      ) : null}
       <style>{`.dg-dualwrite-blocks > div > .rm-block-main {
     display: none;
   }
diff --git a/apps/roam/src/components/settings/navigation/SettingsNavContext.tsx b/apps/roam/src/components/settings/navigation/SettingsNavContext.tsx
new file mode 100644
index 0000000000..ecb85c7f74
--- /dev/null
+++ b/apps/roam/src/components/settings/navigation/SettingsNavContext.tsx
@@ -0,0 +1,53 @@
+import React, { createContext, useContext, useMemo } from "react";
+import {
+  depthOf,
+  segmentsOf,
+  type SettingsNavAction,
+  type SettingsPath,
+} from "~/components/settings/utils/settingsNavigation";
+
+export type SettingsNavValue = {
+  path: SettingsPath;
+  depth: number;
+  segments: readonly string[];
+  push: (segment: string) => void;
+  pop: () => void;
+  goToDepth: (depth: number) => void;
+};
+
+const SettingsNavContext = createContext<SettingsNavValue | null>(null);
+
+export const SettingsNavProvider = ({
+  path,
+  dispatch,
+  children,
+}: {
+  path: SettingsPath;
+  dispatch: React.Dispatch<SettingsNavAction>;
+  children: React.ReactNode;
+}): JSX.Element => {
+  const value = useMemo<SettingsNavValue>(
+    () => ({
+      path,
+      depth: depthOf(path),
+      segments: segmentsOf(path),
+      push: (segment) => dispatch({ type: "push", segment }),
+      pop: () => dispatch({ type: "pop" }),
+      goToDepth: (depth) => dispatch({ type: "truncate", depth }),
+    }),
+    [path, dispatch],
+  );
+  return (
+    <SettingsNavContext.Provider value={value}>
+      {children}
+    </SettingsNavContext.Provider>
+  );
+};
+
+export const useSettingsNav = (): SettingsNavValue => {
+  const context = useContext(SettingsNavContext);
+  if (!context) {
+    throw new Error("useSettingsNav must be used within a SettingsNavProvider");
+  }
+  return context;
+};
diff --git a/apps/roam/src/components/settings/navigation/SettingsPageHeader.tsx b/apps/roam/src/components/settings/navigation/SettingsPageHeader.tsx
new file mode 100644
index 0000000000..e6b9a71200
--- /dev/null
+++ b/apps/roam/src/components/settings/navigation/SettingsPageHeader.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import { Button } from "@blueprintjs/core";
+import { buildBreadcrumbTrail } from "~/components/settings/utils/settingsNavigation";
+import { useSettingsNav } from "./SettingsNavContext";
+
+/** `ancestorLabels` are static crumbs above the tab itself: shown in the trail, not navigable. */
+const SettingsPageHeader = ({
+  ancestorLabels,
+  rootLabel,
+  resolveLabel,
+}: {
+  ancestorLabels: readonly string[];
+  rootLabel: string;
+  resolveLabel: (segment: string, segmentIndex: number) => string;
+}): JSX.Element | null => {
+  const { path, depth, pop, goToDepth } = useSettingsNav();
+  if (depth === 0) return null;
+
+  // depth > 0, so the trail always has a root crumb plus at least one segment.
+  const trail = buildBreadcrumbTrail({ path, rootLabel, resolveLabel });
+  const current = trail[trail.length - 1];
+  const parent = trail[trail.length - 2];
+
+  return (
+    // Shrinkable by default: without flex-shrink-0 the header squashes into the scrolling body.
+    <div className="mb-5 block flex-shrink-0">
+      <div className="mb-1 flex items-center gap-2 text-2xl font-semibold leading-tight">
+        <Button
+          minimal
+          small
+          icon="chevron-left"
+          title={`Back to ${parent.label}`}
+          aria-label={`Back to ${parent.label}`}
+          onClick={pop}
+        />
+        {current.label}
+      </div>
+      <div className="text-sm leading-snug text-gray-500">
+        {ancestorLabels.map((label) => (
+          <span key={label}>{`${label} › `}</span>
+        ))}
+        {trail.map((crumb) => (
+          <span key={crumb.depth}>
+            {crumb.isCurrent ? (
+              crumb.label
+            ) : (
+              <>
+                <a
+                  className="cursor-pointer"
+                  onClick={() => goToDepth(crumb.depth)}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ")
+                      goToDepth(crumb.depth);
+                  }}
+                >
+                  {crumb.label}
+                </a>
+                {" › "}
+              </>
+            )}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SettingsPageHeader;
diff --git a/apps/roam/src/components/settings/utils/settingsNavigation.ts b/apps/roam/src/components/settings/utils/settingsNavigation.ts
new file mode 100644
index 0000000000..2d27b08da8
--- /dev/null
+++ b/apps/roam/src/components/settings/utils/settingsNavigation.ts
@@ -0,0 +1,83 @@
+import type { TabId } from "@blueprintjs/core";
+import {
+  SETTINGS_TAB_IDS,
+  isSettingsTabId,
+  resolveSettingsTabId,
+} from "./settingsTabs";
+
+/** Settings dialog route: `["grammar-nodes", nodeTypeUid, "template"]`, tab first. */
+export type SettingsPath = readonly string[];
+
+export type SettingsNavAction =
+  | { type: "select-tab"; tabId: string }
+  | { type: "push"; segment: string }
+  | { type: "pop" }
+  | { type: "truncate"; depth: number };
+
+export const rootPath = (tabId: string): SettingsPath => [tabId];
+
+export const tabIdOf = (path: SettingsPath): string => path[0] ?? "";
+
+/** Drill-down segments below the tab; 0 is the tab's own root page. */
+export const depthOf = (path: SettingsPath): number =>
+  Math.max(0, path.length - 1);
+
+export const segmentsOf = (path: SettingsPath): readonly string[] =>
+  path.slice(1);
+
+export const settingsNavReducer = (
+  state: SettingsPath,
+  action: SettingsNavAction,
+): SettingsPath => {
+  switch (action.type) {
+    case "select-tab":
+      return action.tabId === tabIdOf(state) && state.length === 1
+        ? state
+        : rootPath(action.tabId);
+    case "push":
+      return [...state, action.segment];
+    case "pop":
+      return state.length <= 1 ? state : state.slice(0, -1);
+    case "truncate": {
+      const length = Math.max(1, action.depth + 1);
+      return length >= state.length ? state : state.slice(0, length);
+    }
+  }
+};
+
+/** An id that is not a tab is a node type uid from the old per-node tabs; it opens
+ *  inside Grammar > Nodes. */
+export const resolveInitialSettingsPath = (
+  selectedTabId?: TabId,
+): SettingsPath => {
+  const tabId = resolveSettingsTabId(selectedTabId);
+  return isSettingsTabId(tabId)
+    ? rootPath(tabId)
+    : [SETTINGS_TAB_IDS.grammarNodes, String(tabId)];
+};
+
+export type SettingsCrumb = {
+  label: string;
+  depth: number;
+  isCurrent: boolean;
+};
+
+export const buildBreadcrumbTrail = ({
+  path,
+  rootLabel,
+  resolveLabel,
+}: {
+  path: SettingsPath;
+  rootLabel: string;
+  resolveLabel: (segment: string, segmentIndex: number) => string;
+}): SettingsCrumb[] => {
+  const segments = segmentsOf(path);
+  return [
+    { label: rootLabel, depth: 0, isCurrent: segments.length === 0 },
+    ...segments.map((segment, index) => ({
+      label: resolveLabel(segment, index),
+      depth: index + 1,
+      isCurrent: index === segments.length - 1,
+    })),
+  ];
+};
diff --git a/apps/roam/src/components/settings/utils/settingsTabs.ts b/apps/roam/src/components/settings/utils/settingsTabs.ts
index 2a07bf3df1..9939d6f401 100644
--- a/apps/roam/src/components/settings/utils/settingsTabs.ts
+++ b/apps/roam/src/components/settings/utils/settingsTabs.ts
@@ -30,6 +30,17 @@ export const SETTINGS_TAB_ALIASES: Record<string, TabId> = {
   "discourse-relations": SETTINGS_TAB_IDS.grammarRelations,
 };
 
+export type SettingsTabId =
+  (typeof SETTINGS_TAB_IDS)[keyof typeof SETTINGS_TAB_IDS];
+
+const SETTINGS_TAB_ID_SET: ReadonlySet<string> = new Set(
+  Object.values(SETTINGS_TAB_IDS),
+);
+
+/** Anything that is not a tab is a node type uid from the old per-node tabs. */
+export const isSettingsTabId = (id: TabId): id is SettingsTabId =>
+  SETTINGS_TAB_ID_SET.has(String(id));
+
 export const resolveSettingsTabId = (
   id: TabId = DEFAULT_SETTINGS_TAB_ID,
 ): TabId => SETTINGS_TAB_ALIASES[String(id)] ?? id;