diff --git a/JekyllHelp/_includes/header.html b/JekyllHelp/_includes/header.html
index 0e23bd7..7b87b88 100644
--- a/JekyllHelp/_includes/header.html
+++ b/JekyllHelp/_includes/header.html
@@ -3,12 +3,12 @@
 	Apple Help's hiutil doesn't index text inside NAV elements, however it only applies to immediate text (a bug?).
 	Thus, all text inside this NAV section is also tightly wrapped with NAVs to prevent indexing.
 	{% endcomment %}
-	<nav id="menu" class="dynamic">
+	<nav id="menu" class="dynamic" role="navigation" aria-hidden>
 		{% assign title_page = site[page.collection] | has: "group_order" | first %}
 		{% assign topics_tree = site[page.collection] | tree_by_with_prop_lookup: "group", "order", title_page.group_order | stable_sort: "order" %}
 		<ul>
 		{% for node in topics_tree %}
-			{% if node.name %}
+			{% if node.items %}
 				{% assign sorted_topics = node.items | sort: "order" %}
 				<li class="group">
 					<a name="name"><nav>{{ node.name }}</nav></a>
diff --git a/JekyllHelp/_plugins/help-filters.rb b/JekyllHelp/_plugins/help-filters.rb
index 588d1c1..27e3ad1 100644
--- a/JekyllHelp/_plugins/help-filters.rb
+++ b/JekyllHelp/_plugins/help-filters.rb
@@ -31,11 +31,11 @@ def tree_by_with_prop_lookup(input, property, newprop, lookup)
 				end.inject([]) do |memo, i|
 					if i.first == ""
 						memo + i.last
-						else
+					else
 						memo << {"name" => i.first, "items" => i.last, newprop => (lookup[i.first] || 0) }
 					end
 				end
-				else
+			else
 				input
 			end
 		end
diff --git a/JekyllHelp/nav.js b/JekyllHelp/nav.js
index c430ed6..72c8a8c 100644
--- a/JekyllHelp/nav.js
+++ b/JekyllHelp/nav.js
@@ -6,15 +6,15 @@ Nav folding expects the following structure (toggle classes denoted by "?class?"
 
 <nav id="menu" class="?animate?">
 
-  <* class="group ?collapsed?">
-    <* name="name"></*>
-    <* name="list">
-      ...
-      <* class="?active?"></*>
-      ...
-    </*>
-  </*>
-  ...
+<* class="group ?collapsed?">
+<* name="name"></*>
+<* name="list">
+...
+<* class="?active?"></*>
+...
+</*>
+</*>
+...
 </nav>
 
 */
@@ -25,42 +25,53 @@ document.documentElement.classList.add('js');
 document.onreadystatechange = function () {
 	switch (document.readyState) {
 		case 'interactive':
-			var groups = document.querySelectorAll('nav#menu .group');
-			Array.prototype.forEach.call(groups, function (group) {
-				var anchor = group.querySelector('[name=name]');
-				var list = group.querySelector('[name=list]');
-				var active = list.querySelector('.active');
-				
-				// Store the height in data for use when expanding
-				list.dataset.height = list.clientHeight + 'px';
-				
-				// Collapse list and mark group, unless it contains the active element
-				list.style.maxHeight = active ? list.dataset.height : '0px';
-				group.classList.toggle('collapsed', ! active);
-				
-				// Attach an expand-on-click handler
-				anchor.addEventListener('click', function() {
-					list.style.maxHeight = (list.style.maxHeight == '0px') ? list.dataset.height : '0px';
-					group.classList.toggle('collapsed');
-				});
+		var groups = document.querySelectorAll('nav#menu .group');
+		Array.prototype.forEach.call(groups, function (group) {
+			var anchor = group.querySelector('[name=name]');
+			var list = group.querySelector('[name=list]');
+			var active = list.querySelector('.active');
+			
+			// Store the height in data for use when expanding
+			list.dataset.height = list.clientHeight + 'px';
+			
+			// Collapse list and mark group, unless it contains the active element
+			list.style.maxHeight = active ? list.dataset.height : '0px';
+			group.classList.toggle('collapsed', ! active);
+			
+			// Attach an expand-on-click handler
+			anchor.addEventListener('click', function() {
+				list.style.maxHeight = (list.style.maxHeight == '0px') ? list.dataset.height : '0px';
+				group.classList.toggle('collapsed');
 			});
-			break;
+		});
+		break;
 		case 'complete':
-			// When the doc is fully loaded, turn on animation
-			document.querySelector('nav#menu').classList.add('animate');
-			break;
+		// When the doc is fully loaded, turn on animation
+		document.querySelector('nav#menu').classList.add('animate');
+		break;
 	}
 };
 
 // Setup TOC Button support when running in Help Viewer
 if ("HelpViewer" in window && "showTOCButton" in window.HelpViewer) {
-	function toggleBanner() {
-		document.querySelector('body').classList.toggle('show-banner');
+	
+	
+	function showTOC() {
+		document.querySelector('nav').setAttribute('aria-hidden', false);
+		// show your TOC
+		document.querySelector('body').classList.add('show-banner');
 	}
+	
+	function hideTOC() {
+		document.querySelector('nav').setAttribute('aria-hidden', true);
+		// hide your TOC
+		document.querySelector('body').classList.remove('show-banner');
+	}
+	
 	window.setTimeout(function () {
-		window.HelpViewer.showTOCButton(true, toggleBanner, toggleBanner);
+		window.HelpViewer.showTOCButton(true, showTOC, hideTOC);
 		window.HelpViewer.setTOCButton(true);
-
+		
 	}, 100);
 }
 
diff --git a/MyApp Example/MyApp.xcodeproj/project.pbxproj b/MyApp Example/MyApp.xcodeproj/project.pbxproj
index f661b09..2ba21a0 100644
--- a/MyApp Example/MyApp.xcodeproj/project.pbxproj	
+++ b/MyApp Example/MyApp.xcodeproj/project.pbxproj	
@@ -257,6 +257,7 @@
 			developmentRegion = English;
 			hasScannedForEncodings = 0;
 			knownRegions = (
+				English,
 				en,
 				Base,
 				_English,
@@ -312,7 +313,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "/usr/bin/make -C \"$(dirname \"$PRODUCT_SETTINGS_PATH\")\"";
+			shellScript = "/usr/bin/make -C \"$(dirname \"$PRODUCT_SETTINGS_PATH\")\"\n";
 			showEnvVarsInLog = 0;
 		};
 /* End PBXShellScriptBuildPhase section */
diff --git a/MyApp Example/MyAppHelp/.jekyll-metadata b/MyApp Example/MyAppHelp/.jekyll-metadata
new file mode 100644
index 0000000..8fea9c2
Binary files /dev/null and b/MyApp Example/MyAppHelp/.jekyll-metadata differ
diff --git a/MyApp Example/MyAppHelp/.vscode/launch.json b/MyApp Example/MyAppHelp/.vscode/launch.json
new file mode 100644
index 0000000..ca04038
--- /dev/null
+++ b/MyApp Example/MyAppHelp/.vscode/launch.json	
@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Listen for rdebug-ide",
+            "type": "Ruby",
+            "request": "attach",
+            "remoteHost": "127.0.0.1",
+            "remotePort": "1234",
+            "remoteWorkspaceRoot": "${workspaceRoot}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/MyApp Example/MyAppHelp/.vscode/tasks.json b/MyApp Example/MyAppHelp/.vscode/tasks.json
new file mode 100644
index 0000000..7ebd81d
--- /dev/null
+++ b/MyApp Example/MyAppHelp/.vscode/tasks.json	
@@ -0,0 +1,43 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "start-debug",
+            "command": "bundle",
+            "args": [
+               "exec", "rdebug-ide",
+                  "--host", "0.0.0.0",
+                  "--port", "1234",
+                  "--dispatcher-port", "26162",
+                  "--",
+                  "/usr/local/bin/jekyll", "serve",
+                      "--livereload_port", "35721",
+                      "--force_polling",
+                      "--host", "0.0.0.0",
+                      "--incremental",
+                      "--livereload",
+                      "--port", "4001",
+                      "--future",
+                      "--drafts",
+                      "--unpublished",
+            ],
+            "isBackground": true,
+            "presentation": {
+                "panel": "new"
+            },
+            "problemMatcher": {
+                "owner": "custom",
+                "pattern": {
+                    "regexp": "____"
+                },
+                "background": {
+                    "activeOnStart": true,
+                    "beginsPattern": "____",
+                    "endsPattern": "Fast Debugger"
+                }
+            }
+        }
+    ]
+  }
\ No newline at end of file
diff --git a/MyApp Example/MyAppHelp/Gemfile b/MyApp Example/MyAppHelp/Gemfile
new file mode 100644
index 0000000..06a9eb0
--- /dev/null
+++ b/MyApp Example/MyAppHelp/Gemfile	
@@ -0,0 +1,8 @@
+source "https://rubygems.org"
+
+gem "jekyll"
+
+gem "ruby-debug-ide"
+
+gem 'debase', require: false
+gem 'debase-ruby_core_source', '>= 0.10.15', require: false
\ No newline at end of file
diff --git a/MyApp Example/MyAppHelp/Gemfile.lock b/MyApp Example/MyAppHelp/Gemfile.lock
new file mode 100644
index 0000000..9355937
--- /dev/null
+++ b/MyApp Example/MyAppHelp/Gemfile.lock	
@@ -0,0 +1,78 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.1)
+      public_suffix (>= 2.0.2, < 6.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.10)
+    debase (0.2.5.beta2)
+      debase-ruby_core_source (>= 0.10.12)
+    debase-ruby_core_source (0.10.17)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.15.5)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.8.0)
+    i18n (1.12.0)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.3.1)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (>= 0.3.6, < 0.5)
+      pathutil (~> 0.9)
+      rouge (>= 3.0, < 5.0)
+      safe_yaml (~> 1.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
+    jekyll-sass-converter (2.2.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.7.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (5.0.0)
+    rake (13.0.6)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.5)
+    rouge (4.0.0)
+    ruby-debug-ide (0.7.3)
+      rake (>= 0.8.1)
+    safe_yaml (1.0.5)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.3.0)
+    webrick (1.7.0)
+
+PLATFORMS
+  x86_64-darwin-21
+
+DEPENDENCIES
+  debase
+  debase-ruby_core_source (>= 0.10.15)
+  jekyll
+  ruby-debug-ide
+
+BUNDLED WITH
+   2.3.25
diff --git a/MyApp Example/MyAppHelp/_English.lproj/index.md b/MyApp Example/MyAppHelp/_English.lproj/index.md
index 09f6839..ada48ec 100644
--- a/MyApp Example/MyAppHelp/_English.lproj/index.md	
+++ b/MyApp Example/MyAppHelp/_English.lproj/index.md	
@@ -5,5 +5,8 @@ apple_title: Jekyll Help
 anchor: title-page
 menu_exclude: true
 robots: anchors
-group_order: {}
+group_order: {
+    Group A: 100,
+    Group B: 101
+}
 ---
diff --git a/MyApp Example/MyAppHelp/_English.lproj/topic-1.md b/MyApp Example/MyAppHelp/_English.lproj/topic-1.md
index ad61ad9..942dfb6 100644
--- a/MyApp Example/MyAppHelp/_English.lproj/topic-1.md	
+++ b/MyApp Example/MyAppHelp/_English.lproj/topic-1.md	
@@ -1,4 +1,5 @@
 ---
 title: Do Something
 group: Group A
+order: 3
 ---
\ No newline at end of file
diff --git a/MyApp Example/MyAppHelp/_English.lproj/topic-2.md b/MyApp Example/MyAppHelp/_English.lproj/topic-2.md
index 38f54aa..c528944 100644
--- a/MyApp Example/MyAppHelp/_English.lproj/topic-2.md	
+++ b/MyApp Example/MyAppHelp/_English.lproj/topic-2.md	
@@ -1,4 +1,5 @@
 ---
 title: Do Another-thing
 group: Group A
+order: 2
 ---
\ No newline at end of file
diff --git a/MyApp Example/MyAppHelp/_English.lproj/topic-3.md b/MyApp Example/MyAppHelp/_English.lproj/topic-3.md
index 14f7b59..34eeeab 100644
--- a/MyApp Example/MyAppHelp/_English.lproj/topic-3.md	
+++ b/MyApp Example/MyAppHelp/_English.lproj/topic-3.md	
@@ -1,4 +1,5 @@
 ---
 title: Do Something Else
 group: Group B
+order: 1
 ---
diff --git a/MyApp Example/MyAppHelp/_includes/footer.html b/MyApp Example/MyAppHelp/_includes/footer.html
index 6a2c9b1..851b4c0 100644
--- a/MyApp Example/MyAppHelp/_includes/footer.html	
+++ b/MyApp Example/MyAppHelp/_includes/footer.html	
@@ -2,4 +2,5 @@
 Apple Help's hiutil doesn't index text inside FOOTER elements, see comment in header.html for details.
 {% endcomment %}
 <footer>
+    asdfasdf
 </footer>
diff --git a/MyApp Example/MyAppHelp/_includes/header.html b/MyApp Example/MyAppHelp/_includes/header.html
index 0e23bd7..21a996b 100644
--- a/MyApp Example/MyAppHelp/_includes/header.html	
+++ b/MyApp Example/MyAppHelp/_includes/header.html	
@@ -3,13 +3,14 @@
 	Apple Help's hiutil doesn't index text inside NAV elements, however it only applies to immediate text (a bug?).
 	Thus, all text inside this NAV section is also tightly wrapped with NAVs to prevent indexing.
 	{% endcomment %}
-	<nav id="menu" class="dynamic">
+	<nav id="menu" class="dynamic" role="navigation" aria-hidden="false">
 		{% assign title_page = site[page.collection] | has: "group_order" | first %}
 		{% assign topics_tree = site[page.collection] | tree_by_with_prop_lookup: "group", "order", title_page.group_order | stable_sort: "order" %}
 		<ul>
 		{% for node in topics_tree %}
-			{% if node.name %}
+			{% if node.items %}
 				{% assign sorted_topics = node.items | sort: "order" %}
+				
 				<li class="group">
 					<a name="name"><nav>{{ node.name }}</nav></a>
 					<ul name="list">
diff --git a/MyApp Example/MyAppHelp/_plugins/help-filters.rb b/MyApp Example/MyAppHelp/_plugins/help-filters.rb
index 588d1c1..27e3ad1 100644
--- a/MyApp Example/MyAppHelp/_plugins/help-filters.rb	
+++ b/MyApp Example/MyAppHelp/_plugins/help-filters.rb	
@@ -31,11 +31,11 @@ def tree_by_with_prop_lookup(input, property, newprop, lookup)
 				end.inject([]) do |memo, i|
 					if i.first == ""
 						memo + i.last
-						else
+					else
 						memo << {"name" => i.first, "items" => i.last, newprop => (lookup[i.first] || 0) }
 					end
 				end
-				else
+			else
 				input
 			end
 		end
diff --git a/MyApp Example/MyAppHelp/nav.js b/MyApp Example/MyAppHelp/nav.js
index c430ed6..bb9295b 100644
--- a/MyApp Example/MyAppHelp/nav.js	
+++ b/MyApp Example/MyAppHelp/nav.js	
@@ -6,15 +6,15 @@ Nav folding expects the following structure (toggle classes denoted by "?class?"
 
 <nav id="menu" class="?animate?">
 
-  <* class="group ?collapsed?">
-    <* name="name"></*>
-    <* name="list">
-      ...
-      <* class="?active?"></*>
-      ...
-    </*>
-  </*>
-  ...
+<* class="group ?collapsed?">
+<* name="name"></*>
+<* name="list">
+...
+<* class="?active?"></*>
+...
+</*>
+</*>
+...
 </nav>
 
 */
@@ -25,42 +25,54 @@ document.documentElement.classList.add('js');
 document.onreadystatechange = function () {
 	switch (document.readyState) {
 		case 'interactive':
-			var groups = document.querySelectorAll('nav#menu .group');
-			Array.prototype.forEach.call(groups, function (group) {
-				var anchor = group.querySelector('[name=name]');
-				var list = group.querySelector('[name=list]');
-				var active = list.querySelector('.active');
-				
-				// Store the height in data for use when expanding
-				list.dataset.height = list.clientHeight + 'px';
-				
-				// Collapse list and mark group, unless it contains the active element
-				list.style.maxHeight = active ? list.dataset.height : '0px';
-				group.classList.toggle('collapsed', ! active);
-				
-				// Attach an expand-on-click handler
-				anchor.addEventListener('click', function() {
-					list.style.maxHeight = (list.style.maxHeight == '0px') ? list.dataset.height : '0px';
-					group.classList.toggle('collapsed');
-				});
+		var groups = document.querySelectorAll('nav#menu .group');
+		Array.prototype.forEach.call(groups, function (group) {
+			var anchor = group.querySelector('[name=name]');
+			var list = group.querySelector('[name=list]');
+			var active = list.querySelector('.active');
+			
+			// Store the height in data for use when expanding
+			list.dataset.height = list.clientHeight + 'px';
+			
+			// Collapse list and mark group, unless it contains the active element
+			list.style.maxHeight = active ? list.dataset.height : '0px';
+			group.classList.toggle('collapsed', ! active);
+			
+			// Attach an expand-on-click handler
+			anchor.addEventListener('click', function() {
+				list.style.maxHeight = (list.style.maxHeight == '0px') ? list.dataset.height : '0px';
+				group.classList.toggle('collapsed');
 			});
-			break;
+		});
+		break;
 		case 'complete':
-			// When the doc is fully loaded, turn on animation
-			document.querySelector('nav#menu').classList.add('animate');
-			break;
+		// When the doc is fully loaded, turn on animation
+		document.querySelector('nav#menu').classList.add('animate');
+		break;
 	}
 };
 
-// Setup TOC Button support when running in Help Viewer
 if ("HelpViewer" in window && "showTOCButton" in window.HelpViewer) {
 	function toggleBanner() {
 		document.querySelector('body').classList.toggle('show-banner');
 	}
+	
+	function showTOC() {
+		document.querySelector('nav').setAttribute('aria-hidden', false);
+		// show your TOC
+		document.querySelector('body').classList.add('show-banner');
+	}
+	
+	function hideTOC() {
+		document.querySelector('nav').setAttribute('aria-hidden', true);
+		// hide your TOC
+		document.querySelector('body').classList.remove('show-banner');
+	}
+	
 	window.setTimeout(function () {
-		window.HelpViewer.showTOCButton(true, toggleBanner, toggleBanner);
+		window.HelpViewer.showTOCButton(true, showTOC, hideTOC);
 		window.HelpViewer.setTOCButton(true);
-
+		
 	}, 100);
 }