@anydigital/11ty-bricks 1.0.0-alpha.3 → 1.0.0-alpha.4

package/README.md

@@ -102,6 +102,48 @@ Use {{ variable }} to output variables.
 
 Would try to process `{{ variable }}` as a template variable. With `autoRaw`, it displays exactly as written.
 
+## Available Bricks (Components)
+
+### Navigation Macro (`_nav.njk`)
+
+A reusable Nunjucks macro for rendering navigation menus with proper accessibility attributes. This macro works seamlessly with the [11ty Navigation Plugin](https://www.11ty.dev/docs/plugins/navigation/).
+
+**Usage:**
+
+1. Import the macro in your template:
+
+```njk
+{% from "bricks/_nav.njk" import render as renderNav %}
+```
+
+2. Call the macro with your navigation data:
+
+```njk
+{{ renderNav(collections.all | eleventyNavigation, page) }}
+```
+
+**Parameters:**
+
+- `navPages`: Array of navigation entries (typically from `eleventyNavigation` filter)
+- `curPage`: Current page object (use Eleventy's `page` variable)
+
+**Features:**
+
+- Renders a semantic `<nav>` element
+- Automatically adds `aria-current="page"` to the current page link for accessibility
+- Clean, minimal markup ready for styling
+- Works with nested navigation structures from the 11ty Navigation Plugin
+
+**Example Output:**
+
+```html
+<nav>
+  <a href="/">Home</a>
+  <a href="/about/">About</a>
+  <a href="/contact/" aria-current="page">Contact</a>
+</nav>
+```
+
 ## CLI Helper Commands
 
 After installing this package, the `download-files` command becomes available:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/11ty-bricks",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "description": "A collection of helpful utilities and filters for Eleventy (11ty)",
   "type": "module",
   "main": "./src/index.js",
@@ -11,7 +11,7 @@
     }
   },
   "bin": {
-    "download-files": "./src/cli/download-files.js"
+    "download-files": "src/cli/download-files.js"
   },
   "files": [
     "src"

package/src/bricks/_nav.njk

@@ -0,0 +1,10 @@
+{% macro render(navPages, curPage) %}
+{# https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually #}
+<nav>
+  {%- for entry in navPages %}
+  <a href="{{ entry.url }}" {{ 'aria-current="page"' | safe if entry.url == curPage.url }}>
+    {{- entry.title -}}
+  </a>
+  {%- endfor %}
+</nav>
+{% endmacro %}