diff --git a/assets/js/base.js b/assets/js/base.js
index 38481d90..ee626979 100644
--- a/assets/js/base.js
+++ b/assets/js/base.js
@@ -151,8 +151,27 @@ export const initializeNav = () => {
         nav.attr('aria-expanded', btn.attr('aria-pressed'));
       }
     };
-
     screenTest(mql);
     mql.addListener(screenTest);
   }
 };
+
+const filterSiblings = (selector, filter) => {
+  $(`${selector} ~ section`).each((idx, node) => {
+    if (filter === '' || node.id.includes(filter)) {
+      $(node).show();
+    } else {
+      $(node).hide();
+    }
+  });
+};
+
+export const initializePageFilters = () => {
+  $('#page-filter').submit(event => {
+    event.preventDefault();
+    return false;
+  });
+  $('#page-filter input').keyup(() => {
+    filterSiblings('#page-filter', $('#page-filter input').val());
+  });
+};
diff --git a/assets/js/init.js b/assets/js/init.js
index 31812fe0..ebd63e36 100644
--- a/assets/js/init.js
+++ b/assets/js/init.js
@@ -9,4 +9,5 @@ $(() => {
   base.initializeToggles();
   base.initializeIframes();
   base.initializeNav();
+  base.initializePageFilters();
 });
diff --git a/dist/js/base.js b/dist/js/base.js
new file mode 100644
index 00000000..5b8de61f
--- /dev/null
+++ b/dist/js/base.js
@@ -0,0 +1 @@
+window.Herman=function(t,e){"use strict";const a={SPACE:32,ENTER:13,TAB:9,ESC:27,BACKSPACE:8,SHIFT:16,CTRL:17,ALT:18,CAPS:20,LEFT:37,UP:38,RIGHT:39,DOWN:40,DELETE:46,COMMA:44};t.initializeToggles=function(){const t=e("body");t.on("toggle:close",'[data-toggle="button"]',function(){const t=e(this).attr("aria-controls"),a=e(`[data-target-id="${t}"]`);e(`[data-toggle="button"][aria-controls="${t}"][aria-pressed="true"]`).attr("aria-pressed","false"),a.trigger("target:close")}),t.on("toggle:open",'[data-toggle="button"]',function(){const t=e(this),a=t.attr("aria-controls"),n=e(`[data-target-id="${a}"]`),o=e(`[data-toggle="button"][aria-controls="${a}"]`).not(t);t.data("toggle-synced")?o.filter('[data-toggle-synced="true"]').attr("aria-pressed","true"):o.filter('[aria-pressed="true"]').attr("aria-pressed","false"),t.attr("aria-pressed","true"),n.trigger("target:open")}),t.on("target:close",'[data-toggle="target"]',function(t){const a=e(this);e(t.target).is(a)&&a.attr("aria-expanded","false")});const a=function(t){const a=t.attr("data-target-id"),n=e(`[data-toggle="button"][aria-controls="${a}"][aria-pressed="true"]`);n.length?n.trigger("toggle:close"):t.trigger("target:close")};t.on("target:open",'[data-toggle="target"]',function(t){const a=e(this);e(t.target).is(a)&&a.attr("aria-expanded","true")}),t.on("click",'[data-toggle="button"]',function(t){t.preventDefault();const a=e(this);"true"===a.attr("aria-pressed")?a.trigger("toggle:close"):a.trigger("toggle:open")}),t.on("click",'[data-toggle="close"]',function(t){t.preventDefault();const n=e(`[data-target-id="${e(this).attr("aria-controls")}"]`);a(n)});t.on("click",t=>{e('[data-toggle="target"][aria-expanded="true"][data-auto-closing="true"]').each((n,o)=>{!function(t,e){const n=e.attr("data-target-id"),o=t.closest(`[aria-controls="${n}"]`).length,r=document.contains(t.get(0)),i=!t.closest(e).length,s=e.attr("data-auto-closing-exception"),c=!!s&&t.closest(s).length;!o&&(e.data("auto-closing-on-any-click")||r&&i&&!c)&&a(e)}(e(t.target),e(o))})})},t.initializeTabs=function(){const t=e("body"),n=function(t){const a=t.attr("data-tab-group");return e(`[role="tab"][data-tab-group="${a}"]`)},o=function(t){const a=t.attr("data-tab-group");return e(`[role="tabpanel"][data-tab-group="${a}"]`)},r=function(t){const e=n(t),a=o(t),r=a.filter(`[aria-labelledby="${t.attr("id")}"]`);t.attr({tabindex:0,"aria-selected":!0}),e.not(t).attr("tabindex",-1).removeAttr("aria-selected"),r.removeAttr("aria-hidden").trigger("visible"),a.not(r).attr("aria-hidden",!0),t.trigger("tab:active")};t.on("tabs:close",'[role="tab"]',function(){const t=e(this),a=n(t),r=o(t);a.attr("tabindex",-1).removeAttr("aria-selected"),r.attr("aria-hidden",!0)}),t.on("click",'[role="tab"]',function(t){t.preventDefault(),r(e(this))}),t.on("keydown",'[role="tab"]',function(t){const o=e(this),i=n(o),s=i.index(o);let c=s;switch(t.keyCode){case a.LEFT:c=s>0?s-1:s;break;case a.RIGHT:c=s+1}const g=i.eq(c);s!==c&&g.length&&(r(g),g.focus())})},t.initializeIframes=function(){const t=function(t){t.contentWindow.document.body&&(t.height=e(t.contentWindow.document).outerHeight(!0))},a=function(){e("iframe").each(function(){t(this)})};a(),e("iframe").on("load",function(){t(this)}),e(window).on("resize",a)};return t.initializePageFilters=function(){e("#page-filter").submit(t=>(t.preventDefault(),!1)),e("#page-filter input").keyup(()=>{!function(t,a){e(`${t} ~ section`).each((t,n)=>{""===a||n.id.includes(a)?e(n).show():e(n).hide()})}("#page-filter",e("#page-filter input").val())})},t}(window.Herman||{},window.jQuery);
\ No newline at end of file
diff --git a/dist/js/init.js b/dist/js/init.js
new file mode 100644
index 00000000..4e64d939
--- /dev/null
+++ b/dist/js/init.js
@@ -0,0 +1 @@
+window.Herman=function(i,n){"use strict";return n(()=>{window.hljs.initHighlighting(),i.initializeToggles(),i.initializeTabs(),i.initializeIframes(),i.initializePageFilters()}),i}(window.Herman||{},window.jQuery);
\ No newline at end of file
diff --git a/docs/api_json-export.html b/docs/api_json-export.html
index 25b4a687..01a0c6cb 100644
--- a/docs/api_json-export.html
+++ b/docs/api_json-export.html
@@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title">
         <div data-sassdoc-page="api_json-export">
           
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/assets/js/base.js b/docs/assets/js/base.js
new file mode 100644
index 00000000..5b8de61f
--- /dev/null
+++ b/docs/assets/js/base.js
@@ -0,0 +1 @@
+window.Herman=function(t,e){"use strict";const a={SPACE:32,ENTER:13,TAB:9,ESC:27,BACKSPACE:8,SHIFT:16,CTRL:17,ALT:18,CAPS:20,LEFT:37,UP:38,RIGHT:39,DOWN:40,DELETE:46,COMMA:44};t.initializeToggles=function(){const t=e("body");t.on("toggle:close",'[data-toggle="button"]',function(){const t=e(this).attr("aria-controls"),a=e(`[data-target-id="${t}"]`);e(`[data-toggle="button"][aria-controls="${t}"][aria-pressed="true"]`).attr("aria-pressed","false"),a.trigger("target:close")}),t.on("toggle:open",'[data-toggle="button"]',function(){const t=e(this),a=t.attr("aria-controls"),n=e(`[data-target-id="${a}"]`),o=e(`[data-toggle="button"][aria-controls="${a}"]`).not(t);t.data("toggle-synced")?o.filter('[data-toggle-synced="true"]').attr("aria-pressed","true"):o.filter('[aria-pressed="true"]').attr("aria-pressed","false"),t.attr("aria-pressed","true"),n.trigger("target:open")}),t.on("target:close",'[data-toggle="target"]',function(t){const a=e(this);e(t.target).is(a)&&a.attr("aria-expanded","false")});const a=function(t){const a=t.attr("data-target-id"),n=e(`[data-toggle="button"][aria-controls="${a}"][aria-pressed="true"]`);n.length?n.trigger("toggle:close"):t.trigger("target:close")};t.on("target:open",'[data-toggle="target"]',function(t){const a=e(this);e(t.target).is(a)&&a.attr("aria-expanded","true")}),t.on("click",'[data-toggle="button"]',function(t){t.preventDefault();const a=e(this);"true"===a.attr("aria-pressed")?a.trigger("toggle:close"):a.trigger("toggle:open")}),t.on("click",'[data-toggle="close"]',function(t){t.preventDefault();const n=e(`[data-target-id="${e(this).attr("aria-controls")}"]`);a(n)});t.on("click",t=>{e('[data-toggle="target"][aria-expanded="true"][data-auto-closing="true"]').each((n,o)=>{!function(t,e){const n=e.attr("data-target-id"),o=t.closest(`[aria-controls="${n}"]`).length,r=document.contains(t.get(0)),i=!t.closest(e).length,s=e.attr("data-auto-closing-exception"),c=!!s&&t.closest(s).length;!o&&(e.data("auto-closing-on-any-click")||r&&i&&!c)&&a(e)}(e(t.target),e(o))})})},t.initializeTabs=function(){const t=e("body"),n=function(t){const a=t.attr("data-tab-group");return e(`[role="tab"][data-tab-group="${a}"]`)},o=function(t){const a=t.attr("data-tab-group");return e(`[role="tabpanel"][data-tab-group="${a}"]`)},r=function(t){const e=n(t),a=o(t),r=a.filter(`[aria-labelledby="${t.attr("id")}"]`);t.attr({tabindex:0,"aria-selected":!0}),e.not(t).attr("tabindex",-1).removeAttr("aria-selected"),r.removeAttr("aria-hidden").trigger("visible"),a.not(r).attr("aria-hidden",!0),t.trigger("tab:active")};t.on("tabs:close",'[role="tab"]',function(){const t=e(this),a=n(t),r=o(t);a.attr("tabindex",-1).removeAttr("aria-selected"),r.attr("aria-hidden",!0)}),t.on("click",'[role="tab"]',function(t){t.preventDefault(),r(e(this))}),t.on("keydown",'[role="tab"]',function(t){const o=e(this),i=n(o),s=i.index(o);let c=s;switch(t.keyCode){case a.LEFT:c=s>0?s-1:s;break;case a.RIGHT:c=s+1}const g=i.eq(c);s!==c&&g.length&&(r(g),g.focus())})},t.initializeIframes=function(){const t=function(t){t.contentWindow.document.body&&(t.height=e(t.contentWindow.document).outerHeight(!0))},a=function(){e("iframe").each(function(){t(this)})};a(),e("iframe").on("load",function(){t(this)}),e(window).on("resize",a)};return t.initializePageFilters=function(){e("#page-filter").submit(t=>(t.preventDefault(),!1)),e("#page-filter input").keyup(()=>{!function(t,a){e(`${t} ~ section`).each((t,n)=>{""===a||n.id.includes(a)?e(n).show():e(n).hide()})}("#page-filter",e("#page-filter input").val())})},t}(window.Herman||{},window.jQuery);
\ No newline at end of file
diff --git a/docs/assets/js/init.js b/docs/assets/js/init.js
new file mode 100644
index 00000000..4e64d939
--- /dev/null
+++ b/docs/assets/js/init.js
@@ -0,0 +1 @@
+window.Herman=function(i,n){"use strict";return n(()=>{window.hljs.initHighlighting(),i.initializeToggles(),i.initializeTabs(),i.initializeIframes(),i.initializePageFilters()}),i}(window.Herman||{},window.jQuery);
\ No newline at end of file
diff --git a/docs/config-colors.html b/docs/config-colors.html
index 1e31f53b..e964642b 100644
--- a/docs/config-colors.html
+++ b/docs/config-colors.html
@@ -363,6 +363,12 @@ <h4 class="param-title">
 </section>
 
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/config-fonts.html b/docs/config-fonts.html
index e07d0ebd..f7654b8c 100644
--- a/docs/config-fonts.html
+++ b/docs/config-fonts.html
@@ -363,6 +363,12 @@ <h4 class="param-title">
 </section>
 
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/config-scale.html b/docs/config-scale.html
index 7ae1a8a1..e64bd320 100644
--- a/docs/config-scale.html
+++ b/docs/config-scale.html
@@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title">
         <div data-sassdoc-page="config-scale">
           
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/config-utils.html b/docs/config-utils.html
index fffb56c6..6cbba4d5 100644
--- a/docs/config-utils.html
+++ b/docs/config-utils.html
@@ -325,6 +325,12 @@ <h1 id="herman-config-private-helpers">Herman Config: Private<span class="widont
 </section>
 
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/config-z-index.html b/docs/config-z-index.html
index a0a4f1b7..4f5e1cbe 100644
--- a/docs/config-z-index.html
+++ b/docs/config-z-index.html
@@ -363,6 +363,12 @@ <h4 class="param-title">
 </section>
 
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/config_api-utilities.html b/docs/config_api-utilities.html
index 76489bb2..481c58d0 100644
--- a/docs/config_api-utilities.html
+++ b/docs/config_api-utilities.html
@@ -328,6 +328,12 @@ <h1 id="private-api-utilities">Private API Utilities</h1>
 </section>
 
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/demo_colors.html b/docs/demo_colors.html
index 2ef01d59..659d95c8 100644
--- a/docs/demo_colors.html
+++ b/docs/demo_colors.html
@@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title">
         <div data-sassdoc-page="demo_colors">
           
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/demo_examples.html b/docs/demo_examples.html
index 8e71f058..67d59072 100644
--- a/docs/demo_examples.html
+++ b/docs/demo_examples.html
@@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title">
         <div data-sassdoc-page="demo_examples">
           
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/demo_fonts.html b/docs/demo_fonts.html
index 7435bf2f..ff2d5f0b 100644
--- a/docs/demo_fonts.html
+++ b/docs/demo_fonts.html
@@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title">
         <div data-sassdoc-page="demo_fonts">
           
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/demo_icons.html b/docs/demo_icons.html
index 41493324..84f2d2ec 100644
--- a/docs/demo_icons.html
+++ b/docs/demo_icons.html
@@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title">
         <div data-sassdoc-page="demo_icons">
           
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/demo_sizes.html b/docs/demo_sizes.html
index cb79f142..7b2df8a7 100644
--- a/docs/demo_sizes.html
+++ b/docs/demo_sizes.html
@@ -250,6 +250,12 @@ <h3 data-sassdoc="nav-title">
         <div data-sassdoc-page="demo_sizes">
           
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/demo_test-sassdoc.html b/docs/demo_test-sassdoc.html
index 27da2f45..f65affb0 100644
--- a/docs/demo_test-sassdoc.html
+++ b/docs/demo_test-sassdoc.html
@@ -329,6 +329,12 @@ <h1 id="sassdoc-annotations">SassDoc Annotations</h1>
 </section>
 
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/style-code.html b/docs/style-code.html
index f2c4cdcb..b9fc9bf5 100644
--- a/docs/style-code.html
+++ b/docs/style-code.html
@@ -363,6 +363,12 @@ <h4 class="param-title">
 </section>
 
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/style-icons.html b/docs/style-icons.html
index 24f0066a..a9e2c546 100644
--- a/docs/style-icons.html
+++ b/docs/style-icons.html
@@ -392,6 +392,12 @@ <h3 class="item-subtitle">
 </section>
 
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/style-nav.html b/docs/style-nav.html
index ccf6412c..5f414b76 100644
--- a/docs/style-nav.html
+++ b/docs/style-nav.html
@@ -325,6 +325,12 @@ <h1 id="herman-navigation-component">Herman Navigation Component</h1>
 </section>
 
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/style-sections.html b/docs/style-sections.html
index 09cc6754..a7022ef8 100644
--- a/docs/style-sections.html
+++ b/docs/style-sections.html
@@ -325,6 +325,12 @@ <h1 id="herman-section-arrow-component">Herman Section-Arrow Component</h1>
 </section>
 
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/docs/style-typography.html b/docs/style-typography.html
index 03dd3b45..13fe1e7c 100644
--- a/docs/style-typography.html
+++ b/docs/style-typography.html
@@ -325,6 +325,12 @@ <h1 id="herman-typography">Herman Typography</h1>
 </section>
 
   
+
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
+
+  
     
     
 
diff --git a/templates/filter_form.j2 b/templates/filter_form.j2
new file mode 100644
index 00000000..2bcd66ea
--- /dev/null
+++ b/templates/filter_form.j2
@@ -0,0 +1,3 @@
+<form id="page-filter">
+  <input placeholder="filter">
+</form>
diff --git a/templates/group.njk b/templates/group.njk
index 19a1526d..566c2813 100644
--- a/templates/group.njk
+++ b/templates/group.njk
@@ -13,6 +13,7 @@
 {% endblock %}
 
 {% block main %}
+  {% include 'filter_form.j2' %}
   {% for item in items %}
     {% set type = item.context.type %}
     {% include 'item/_item.njk' %}