diff --git a/package-lock.json b/package-lock.json
index 4454dc0..47ff557 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2227,8 +2227,7 @@
     "@types/node": {
       "version": "14.0.13",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.13.tgz",
-      "integrity": "sha512-rouEWBImiRaSJsVA+ITTFM6ZxibuAlTuNOCyxVbwreu6k6+ujs7DfnU9o+PShFhET78pMBl3eH+AGSI5eOTkPA==",
-      "dev": true
+      "integrity": "sha512-rouEWBImiRaSJsVA+ITTFM6ZxibuAlTuNOCyxVbwreu6k6+ujs7DfnU9o+PShFhET78pMBl3eH+AGSI5eOTkPA=="
     },
     "@types/normalize-package-data": {
       "version": "2.4.0",
@@ -3538,7 +3537,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -4735,8 +4733,7 @@
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
-      "dev": true
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
     "boxen": {
       "version": "4.2.0",
@@ -5291,7 +5288,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -5328,6 +5324,38 @@
       "integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==",
       "dev": true
     },
+    "cheerio": {
+      "version": "1.0.0-rc.3",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.3.tgz",
+      "integrity": "sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==",
+      "requires": {
+        "css-select": "~1.2.0",
+        "dom-serializer": "~0.1.1",
+        "entities": "~1.1.1",
+        "htmlparser2": "^3.9.1",
+        "lodash": "^4.15.0",
+        "parse5": "^3.0.1"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
+          "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
+          "requires": {
+            "domelementtype": "^1.3.0",
+            "entities": "^1.1.1"
+          }
+        },
+        "parse5": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
+          "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
+          "requires": {
+            "@types/node": "*"
+          }
+        }
+      }
+    },
     "chokidar": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
@@ -5865,7 +5893,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -5873,8 +5900,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "1.5.3",
@@ -6450,7 +6476,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
       "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
-      "dev": true,
       "requires": {
         "boolbase": "~1.0.0",
         "css-what": "2.1",
@@ -6485,8 +6510,7 @@
     "css-what": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
-      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
-      "dev": true
+      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg=="
     },
     "cssesc": {
       "version": "3.0.0",
@@ -7166,7 +7190,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
       "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
-      "dev": true,
       "requires": {
         "domelementtype": "^2.0.1",
         "entities": "^2.0.0"
@@ -7175,14 +7198,12 @@
         "domelementtype": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
-          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==",
-          "dev": true
+          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ=="
         },
         "entities": {
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
-          "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==",
-          "dev": true
+          "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
         }
       }
     },
@@ -7201,8 +7222,7 @@
     "domelementtype": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
-      "dev": true
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
     },
     "domexception": {
       "version": "1.0.1",
@@ -7217,7 +7237,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
       "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
-      "dev": true,
       "requires": {
         "domelementtype": "1"
       }
@@ -7226,7 +7245,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
       "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
-      "dev": true,
       "requires": {
         "dom-serializer": "0",
         "domelementtype": "1"
@@ -7574,8 +7592,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
       "version": "1.14.2",
@@ -9192,8 +9209,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-symbols": {
       "version": "1.0.1",
@@ -9591,7 +9607,6 @@
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
       "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
-      "dev": true,
       "requires": {
         "domelementtype": "^1.3.1",
         "domhandler": "^2.3.0",
@@ -9605,7 +9620,6 @@
           "version": "3.6.0",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
           "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
           "requires": {
             "inherits": "^2.0.3",
             "string_decoder": "^1.1.1",
@@ -9855,8 +9869,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
       "version": "1.3.5",
@@ -12911,7 +12924,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
       "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
-      "dev": true,
       "requires": {
         "boolbase": "~1.0.0"
       }
@@ -13728,7 +13740,6 @@
       "version": "7.0.32",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
       "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
-      "dev": true,
       "requires": {
         "chalk": "^2.4.2",
         "source-map": "^0.6.1",
@@ -13738,14 +13749,12 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "supports-color": {
           "version": "6.1.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
           "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -15701,8 +15710,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -15778,6 +15786,58 @@
         }
       }
     },
+    "sanitize-html": {
+      "version": "1.27.1",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-1.27.1.tgz",
+      "integrity": "sha512-C+N7E+7ikYaLHdb9lEkQaFOgmj+9ddZ311Ixs/QsBsoLD411/vdLweiFyGqrswUVgLqagOS5NCDxcEPH7trObQ==",
+      "requires": {
+        "htmlparser2": "^4.1.0",
+        "lodash": "^4.17.15",
+        "postcss": "^7.0.27",
+        "srcset": "^2.0.1"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
+          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ=="
+        },
+        "domhandler": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.0.0.tgz",
+          "integrity": "sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==",
+          "requires": {
+            "domelementtype": "^2.0.1"
+          }
+        },
+        "domutils": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.1.0.tgz",
+          "integrity": "sha512-CD9M0Dm1iaHfQ1R/TI+z3/JWp/pgub0j4jIQKH89ARR4ATAV2nbaOQS5XxU9maJP5jHaPdDDQSEHuE2UmpUTKg==",
+          "requires": {
+            "dom-serializer": "^0.2.1",
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.0.0"
+          }
+        },
+        "entities": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
+          "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
+        },
+        "htmlparser2": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.1.0.tgz",
+          "integrity": "sha512-4zDq1a1zhE4gQso/c5LP1OtrhYTncXNSpvJYtWJBtXAETPlMfi3IFNjGuQbYLuVY4ZR0QMqRVvo4Pdy9KLyP8Q==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.0.0",
+            "domutils": "^2.0.0",
+            "entities": "^2.0.0"
+          }
+        }
+      }
+    },
     "sass-graph": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
@@ -16618,6 +16678,11 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
+    "srcset": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/srcset/-/srcset-2.0.1.tgz",
+      "integrity": "sha512-00kZI87TdRKwt+P8jj8UZxbfp7mK2ufxcIMWvhAOZNJTRROimpHeruWrGvCZneiuVDLqdyHefVp748ECTnyUBQ=="
+    },
     "sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
@@ -16851,7 +16916,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.0"
       }
@@ -16957,7 +17021,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -17903,8 +17966,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "util.promisify": {
       "version": "1.0.0",
diff --git a/src/components/PanelMenu/PanelMenu.stories.js b/src/components/PanelMenu/PanelMenu.stories.js
new file mode 100644
index 0000000..cdcdd84
--- /dev/null
+++ b/src/components/PanelMenu/PanelMenu.stories.js
@@ -0,0 +1,44 @@
+import PanelMenu from "./PanelMenu"
+import API from "@/static/db.json"
+
+let menuItem = {
+    ...API.menuItems.nodes[0]
+}
+
+const mainMenu = [
+    {
+        ...menuItem,
+        label: "Directors"
+    },
+    {
+        ...menuItem,
+        label: "Work"
+    },
+    {
+        ...menuItem,
+        label: "About"
+    },
+    {
+        ...menuItem,
+        label: "News"
+    },
+    {
+        ...menuItem,
+        label: "Contact"
+    }
+]
+
+export default {
+    title: "@austinblanchard / PanelMenu"
+}
+
+export const PanelMenuDefault = () => ({
+    components: { PanelMenu },
+    data() {
+        return {
+            api: API,
+            mainMenu: mainMenu
+        }
+    },
+    template: `<panel-menu :mainMenu="mainMenu" />`
+})
diff --git a/src/components/PanelMenu/PanelMenu.vue b/src/components/PanelMenu/PanelMenu.vue
new file mode 100644
index 0000000..282efb0
--- /dev/null
+++ b/src/components/PanelMenu/PanelMenu.vue
@@ -0,0 +1,79 @@
+<template>
+    <div class="panel-menu open">
+        <!-- Main Menu -->
+        <wp-menu :items="mainMenu" class="menu main-menu" />
+    </div>
+</template>
+
+<script>
+// Components
+import WpMenu from "@/components/global/WpMenu"
+
+export default {
+    components: {
+        WpMenu
+    },
+    props: {
+        mainMenu: {
+            type: Array,
+            default: () => []
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+:root {
+    --color-rpsg: #fdc760;
+}
+.panel-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+    transform: translateY(-100%);
+    transition: transform 0.4s $authenticMotion;
+    // TODO remove, temporary style for visibility
+    background-color: var(--color-rpsg);
+
+    .menu {
+        display: inline-block;
+        margin: 30px 0 50px;
+        padding: 0 0 0 50px;
+        list-style: none;
+    }
+    .mock-nuxt-link {
+        font-family: var(--font-secondary);
+        font-size: 7.7vw;
+        font-weight: 700;
+        color: var(--color-black);
+        text-transform: uppercase;
+    }
+
+    // Opened state
+    &.open {
+        transform: none;
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        .mock-nuxt-link:hover {
+            color: transparent;
+            -webkit-text-stroke: 1px var(--color-black);
+        }
+    }
+    // Breakpoints
+    @media #{$gt-wide} {
+        .mock-nuxt-link {
+            font-size: 180px;
+        }
+    }
+    @media #{$lt-phone} {
+        .menu {
+            padding: 10px 0 0 20px;
+        }
+    }
+}
+</style>
diff --git a/src/components/global/WpMenu.vue b/src/components/global/WpMenu.vue
new file mode 100644
index 0000000..f79d9de
--- /dev/null
+++ b/src/components/global/WpMenu.vue
@@ -0,0 +1,61 @@
+<template>
+    <ul :class="classes">
+        <slot name="before" />
+
+        <wp-menu-item
+            v-for="(item, i) in menuItems"
+            :key="i"
+            class="menu-item"
+            :item="item"
+        />
+
+        <slot name="after" />
+    </ul>
+</template>
+
+<script>
+// Components
+import WpMenuItem from "@/components/global/WpMenuItem"
+// Helpers
+import _kebabCase from "lodash/kebabCase"
+import _get from "lodash/get"
+
+export default {
+    components: {
+        WpMenuItem
+    },
+    props: {
+        location: {
+            type: String,
+            default: ""
+        },
+        items: {
+            type: Array,
+            default: () => []
+        }
+    },
+    computed: {
+        classes() {
+            return ["wp-menu", `location-${_kebabCase(this.location)}`]
+        },
+        menuItems() {
+            let items = this.items
+            // Use menu from store if name provided
+            if (this.location) {
+                items = _get(
+                    this,
+                    `$store.state.menus.locations.${this.location}`,
+                    []
+                )
+            }
+            return items
+        }
+    },
+    methods: {
+        menuInteracted(event) {
+            this.$emit("menu-interacted", event)
+            this.$store.commit("SET_MENU", false)
+        }
+    }
+}
+</script>
diff --git a/src/components/global/WpMenuItem.vue b/src/components/global/WpMenuItem.vue
new file mode 100644
index 0000000..5fc122e
--- /dev/null
+++ b/src/components/global/WpMenuItem.vue
@@ -0,0 +1,95 @@
+<template>
+    <li :class="classes">
+        <a
+            v-if="!isRelative || isMailTo"
+            target="_blank"
+            :href="item.url"
+            @click="menuInteracted"
+            v-html="item.label"
+        />
+
+        <nuxt-link
+            v-if="isRelative && !isHash"
+            :to="relativeUrl"
+            @click.native="menuInteracted"
+            v-html="item.label"
+        />
+
+        <span v-if="isHash" v-html="item.label" />
+
+        <!-- TODO Make prop for sub-menus to be drop downs -->
+        <ul v-if="hasSubMenu" class="sub-menu">
+            <wp-menu-item
+                v-for="(subItem, i) in getChildren"
+                :key="`sub-${i}`"
+                class="menu-item sub-menu-item"
+                :item="subItem"
+                @menu-interacted="menuInteracted()"
+            />
+        </ul>
+    </li>
+</template>
+
+<script>
+// Components
+import NuxtLink from "@/components/global/NuxtLink"
+// Helpers
+import _get from "lodash/get"
+
+export default {
+    components: {
+        NuxtLink
+    },
+    props: {
+        item: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    computed: {
+        classes() {
+            return [
+                "wp-menu-item menu-item",
+                {
+                    "is-realtive": this.isRelative
+                },
+                { "has-sub-menu": this.hasSubMenu },
+                { "is-disabled": this.isHash }
+            ]
+        },
+        getChildren() {
+            return _get(this, "item.childItems.nodes", [])
+        },
+        hasSubMenu() {
+            return this.getChildren.length
+        },
+        isRelative() {
+            return this.item.target !== "_blank" && !this.isMailTo
+        },
+        isHash() {
+            return this.item.label == "#"
+        },
+        isMailTo() {
+            return this.item.url.includes("mailto:")
+        },
+        relativeUrl() {
+            let url = this.item.url
+            // Replace all these things
+            const replaceThese = [
+                _get(this, "$store.state.siteMeta.frontendUrl", ""),
+                _get(this, "$store.state.siteMeta.backendUrl", ""),
+                _get(this, "$store.state.siteMeta.host", "")
+            ]
+            replaceThese.forEach(element => {
+                url = url.replace(element, "")
+            });
+            return url
+        }
+    },
+    methods: {
+        menuInteracted(event) {
+            this.$emit("menu-interacted", event)
+        }
+    }
+}
+</script>