diff --git a/content/websites/patterns/menu-auto-highlight/layout.html b/content/websites/patterns/menu-auto-highlight/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..c994b5efe054a9e9ee20de01ee60c3ed3fffe9e3
--- /dev/null
+++ b/content/websites/patterns/menu-auto-highlight/layout.html
@@ -0,0 +1,10 @@
+{{#markdown}}
+
+### Notes
+
+- The JS tries to automatically detect active menu item and append class `.active`.
+- It's currently used a bit of jQuery, but this could be coded as vanilla JS.
+- This pattern is likely of most help for JS-powered pages.
+{{/markdown}}
+
+{{> menu-auto-highlight}}
diff --git a/content/websites/patterns/menu-auto-highlight/menu-auto-highlight.html b/content/websites/patterns/menu-auto-highlight/menu-auto-highlight.html
new file mode 100644
index 0000000000000000000000000000000000000000..bf8327e535883df63531196f15adec2e523da265
--- /dev/null
+++ b/content/websites/patterns/menu-auto-highlight/menu-auto-highlight.html
@@ -0,0 +1,17 @@
+<header id="masthead" class="masthead">
+  <div class="masthead-inner row">
+    <!-- local-title -->
+    <div class="columns medium-12" id="local-title">
+      <h1><a href="../../" title="Back to [service-name] homepage">Detect active menu item</a></h1>
+    </div>
+    <!-- /local-title -->
+    <!-- local-nav -->
+    <nav>
+      <ul id="local-nav" class="dropdown menu float-left" data-description="navigational">
+        <li><a href="/">Current page (relative)</a></li>
+        <li><a href="/some-other-page">Not current page</a></li>
+      </ul>
+    </nav>
+    <!-- /local-nav -->
+  </div>
+</header>
diff --git a/content/websites/patterns/menu-auto-highlight/menu-auto-highlight.js b/content/websites/patterns/menu-auto-highlight/menu-auto-highlight.js
new file mode 100644
index 0000000000000000000000000000000000000000..92e2c23ea2feb6e170cfd0ac120a6cb398c826fb
--- /dev/null
+++ b/content/websites/patterns/menu-auto-highlight/menu-auto-highlight.js
@@ -0,0 +1,20 @@
+// Currently this uses jQuery, but could be done without
+// Pull Requests welcome! :P
+function setNavigation() {
+  var path = window.location.pathname;
+  console.log('current path:', path)
+  path = path.replace(/\/$/, "");
+  path = decodeURIComponent(path);
+
+  $("#local-nav a").each(function () {
+    var href = $(this).attr('href');
+    if (path.substring(0, href.length) === href) {
+      $(this).closest('li').addClass('active');
+    }
+  });
+}
+
+$(function () {
+  // when jquery is ready...
+  setNavigation();
+});
diff --git a/content/websites/patterns/menu-auto-highlight/menu-auto-highlight.png b/content/websites/patterns/menu-auto-highlight/menu-auto-highlight.png
new file mode 100644
index 0000000000000000000000000000000000000000..4dfafe2e8ebb5409af45a5977742faba6ec038db
Binary files /dev/null and b/content/websites/patterns/menu-auto-highlight/menu-auto-highlight.png differ
diff --git a/content/websites/patterns/menu-auto-highlight/menu-auto-highlight.yml b/content/websites/patterns/menu-auto-highlight/menu-auto-highlight.yml
new file mode 100644
index 0000000000000000000000000000000000000000..018da402887a74f2e735bcc78abc8431191f6546
--- /dev/null
+++ b/content/websites/patterns/menu-auto-highlight/menu-auto-highlight.yml
@@ -0,0 +1,15 @@
+name: 'Detect and highlight active menu item'
+tags:
+  - navigation
+  - layout
+  - menus
+  - 'JS Framework'
+category: navigation
+description: Use this pattern to automatically highlight the current menu item depending on path.
+versions:
+  - 1.2.0
+  - 1.3.0
+author:
+  name: Ken Hawkins
+  github: khawkins98
+  twitter: khawkins98