Use eleventy-navigation plugin for navigation menu

11ty · Nov 11, 2019 · c9018fa · c9018fa
1 parent 0da708e
commit c9018fa
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 14 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -2,10 +2,12 @@ const { DateTime } = require("luxon");
 const fs = require("fs");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const pluginNavigation = require("@11ty/eleventy-navigation");
 
 module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(pluginRss);
   eleventyConfig.addPlugin(pluginSyntaxHighlight);
+  eleventyConfig.addPlugin(pluginNavigation);
   eleventyConfig.setDataDeepMerge(true);
 
   eleventyConfig.addLayoutAlias("post", "layouts/post.njk");

diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -12,11 +12,13 @@
   <body>
     <header>
       <h1 class="home"><a href="{{ '/' | url }}">{{ metadata.title }}</a></h1>
-      <ul class="nav">
-        {%- for nav in collections.nav | reverse -%}
-        <li class="nav-item{% if nav.url == page.url %} nav-item-active{% endif %}"><a href="{{ nav.url | url }}">{{ nav.data.navtitle }}</a></li>
-        {%- endfor -%}
-      </ul>
+      <!-- Read more about `eleventy-navigation` at https://github.com/11ty/eleventy-navigation -->
+      {{ collections.all | eleventyNavigation | eleventyNavigationToHtml({
+        listClass: "nav",
+        listItemClass: "nav-item",
+        activeListItemClass: "nav-item-active",
+        activeKey: eleventyNavigation.key
+      }) | safe }}
     </header>
 
     <main{% if templateClass %} class="{{ templateClass }}"{% endif %}>

diff --git a/about/index.md b/about/index.md
@@ -1,9 +1,9 @@
 ---
 layout: layouts/post.njk
 title: About Me
-tags:
-  - nav
-navtitle: About
+eleventyNavigation:
+  key: About Me
+  order: 2
 templateClass: tmpl-post
 ---
 

diff --git a/archive.njk b/archive.njk
@@ -1,8 +1,8 @@
 ---
 layout: layouts/home.njk
-tags:
-  - nav
-navtitle: Archive
+eleventyNavigation:
+  key: Archive
+  order: 3
 permalink: /posts/
 ---
 

diff --git a/index.njk b/index.njk
@@ -1,8 +1,8 @@
 ---
 layout: layouts/home.njk
-tags:
-  - nav
-navtitle: Home
+eleventyNavigation:
+  key: Home
+  order: 1
 ---
 
 <h1>Latest 3 Posts</h1>

diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "build": "npx eleventy",
     "watch": "npx eleventy --watch",
+    "serve": "npx eleventy --serve",
     "debug": "DEBUG=* npx eleventy"
   },
   "repository": {
@@ -23,6 +24,7 @@
   "homepage": "https://github.com/11ty/eleventy-base-blog#readme",
   "devDependencies": {
     "@11ty/eleventy": "^0.9.0",
+    "@11ty/eleventy-navigation": "^0.1.0",
     "@11ty/eleventy-plugin-rss": "^1.0.7",
     "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3",
     "luxon": "^1.12.0",