A plugin for creating hierarchical navigation in Eleventy projects. Supports breadcrumbs too!
Home Page: https://www.11ty.dev/docs/plugins/navigation/
A plugin for creating hierarchical navigation in Eleventy projects. Supports breadcrumbs too!
Used in production on 11ty.dev!
Code:
(./_src/components/breadcrumb.njk) [Line 4, Column 24]
[11ty] parseAggregate: expected colon after dict key (via Template render error)
eleventyNavigation:
key: tech-seo
title: Technical SEO
{% set navPages = {{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }} %}
{% for crumb in navPages %}
<li class="breadcrumb-item{% if crumb.url == page.url %} active" aria-current="page">{{ crumb.title }}{% endif %}>{% else %}<a class="pretty-link" href="{{ crumb.url | url }}">{{ crumb.title }}</a>
{%- endfor %}
Exhausted all thoughts on what could be causing this, and wondering if anyone else has a hint.
My front matter has this:
eleventyNavigation:
key: Alphabet
parent: IPA
I've tested this and it works fine, returning all children, including Alphabet:
{% set breadcrumbs = collections.all | eleventyNavigation("IPA") %}
{{ breadcrumbs | eleventyNavigationToHtml | safe }}
But this breaks & gives me "Error: Node does not exist: Alphabet":
{% set breadcrumbs = collections.all | eleventyNavigationBreadcrumb("Alphabet") %}
{{ breadcrumbs | eleventyNavigationToHtml | safe }}
Sadly its the latter that I'm after, for my breadcrumb navigation.
Thanks in advance if anyone has any useful suggestions or ideas why this could be breaking.
Browser:
I'm newbie. I used this guide.
In my md files I used front matter keys like this:
---
title: 11ty starter site
description: This is a demonstration website generated using the 11ty static site generator.
layout: base.njk
eleventyNavigation:
key: home
order: 100
---
---
title: About us
description: What we do.
eleventyNavigation:
key: about
order: 200
---
---
title: Privacy policy
description: We keep your details private.
eleventyNavigation:
key: privacy
parent: about
order: 220
---
---
title: Our team
description: Information about us.
eleventyNavigation:
key: team
parent: about
order: 210
---
But it return empty array (screenshots above):
{% set navPages = collections.all | eleventyNavigation %}
{{ navPages | dump | safe }}
What's problem with eleventy navigation in my project?
Repository: https://github.com/kalininmax/11ty
Hello,
I love this plugin and love that eleventyNavigationToHtml takes care of all rendering for me!
Having an additional rendering option to set aria-current="page" for the current page would be a great accessibility addition. When a screen reader encounters the link identified with aria-current, it will announce something like “Home, current page link”.
I was just wondering if there was a way to add custom li classes or extra divs for the child nav list?
So particularly for
<ul>
{%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
</ul>
Is there a way to extend this, so still generating the child nav links while being able to customise the code with extra html?
This plugin has not yet been upgraded to support Eleventy 2.0..0-canary
I am trying to get to grips with the navigation plugin. i have successfully set it up according to here using {{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }} {{ content | safe }}
However, the page also states that:
you can also pass any collection into eleventyNavigation. It doesn’t have to be collections.all!
I want a page to display a navigation menu only showing the pages i have tagged with mytag. But when I try
{{ collections.mytag | eleventyNavigation | eleventyNavigationToHtml | safe }} {{ content | safe }}
the navigation disappears from my page instead of showing me a navigation menu for pages in the mytag collection. There is nothing where the navigation should be.
I have several pages with the following line in the front matter: tags: mytag
When i iterate over the mytag collection, i can see that the pages are correctly added. So the problem must be with how i call the navigation plugin. Am I missing a step?
Any suggestions much appreciated.
I have some keys, and I would love to have the possibility to reuse them like:
---
title: "Projekte"
translationKey: "page-projects"
eleventyNavigation:
key: "{{ translationKey }}"
title: "{{ title }}"
---I've cloned and ran the sample in this repo, and it produces the results navigation just fine. However when I tried to implement the basic mammals example externally there is some kind of error preventing the navigation from being output. I've spent a while scratching my head on this and I just can't see where I'm going wrong. The collection and the navigation plugin both seem to be being picked up, but there is no output and the breadcrumb causes an error message.
The code I'm running: https://github.com/jonw-cogapp/11ty-navigation
collections.all Template {
inputPath: './bats.md',
inputDir: '.',
parsed: [Object],
extraOutputSubdirectory: '',
outputDir: '_site',
_extensionMap: [EleventyExtensionMap],
linters: [],
transforms: [],
plugins: {},
templateData: [TemplateData],
paginationData: {},
isVerbose: true,
isDryRun: false,
writeCount: 0,
skippedCount: 0,
wrapWithLayouts: true,
fileSlug: [TemplateFileSlug],
fileSlugStr: 'bats',
filePathStem: '/bats',
_templateRender: [TemplateRender],
inputContent:
'---\neleventyNavigation:\n key: Bats\n parent: Mammals\n---',
_config: [Object],
frontMatter: [Object],
dataCache: [Object],
computedData: [ComputedData] },
inputPath: './bats.md',
fileSlug: 'bats',
filePathStem: '/bats',
data:
{ pkg: [Object],
eleventyNavigation: [Object],
page: [Object],
collections: [Object] },
date: 2020-08-07T14:55:57.369Z,
outputPath: '_site/bats/index.html',
url: '/bats/',
templateContent: [Getter/Setter] },
{ template:
Template {
inputPath: './humans.md',
inputDir: '.',
parsed: [Object],
extraOutputSubdirectory: '',
outputDir: '_site',
_extensionMap: [EleventyExtensionMap],
linters: [],
transforms: [],
plugins: {},
templateData: [TemplateData],
paginationData: {},
isVerbose: true,
isDryRun: false,
writeCount: 0,
skippedCount: 0,
wrapWithLayouts: true,
fileSlug: [TemplateFileSlug],
fileSlugStr: 'humans',
filePathStem: '/humans',
_templateRender: [TemplateRender],
inputContent:
'---\neleventyNavigation:\n key: Bats\n parent: Mammals\n---',
_config: [Object],
frontMatter: [Object],
dataCache: [Object],
computedData: [ComputedData] },
inputPath: './humans.md',
fileSlug: 'humans',
filePathStem: '/humans',
data:
{ pkg: [Object],
eleventyNavigation: [Object],
page: [Object],
collections: [Object] },
date: 2020-08-07T14:56:01.087Z,
outputPath: '_site/humans/index.html',
url: '/humans/',
templateContent: [Getter/Setter] },
{ template:
Template {
inputPath: './mammals.md',
inputDir: '.',
parsed: [Object],
extraOutputSubdirectory: '',
outputDir: '_site',
_extensionMap: [EleventyExtensionMap],
linters: [],
transforms: [],
plugins: {},
templateData: [TemplateData],
paginationData: {},
isVerbose: true,
isDryRun: false,
writeCount: 0,
skippedCount: 0,
wrapWithLayouts: true,
fileSlug: [TemplateFileSlug],
fileSlugStr: 'mammals',
filePathStem: '/mammals',
_templateRender: [TemplateRender],
inputContent:
'---\neleventyNavigation:\n key: Bats\n parent: Mammals\n---',
_config: [Object],
frontMatter: [Object],
dataCache: [Object],
computedData: [ComputedData] },
inputPath: './mammals.md',
fileSlug: 'mammals',
filePathStem: '/mammals',
data:
{ pkg: [Object],
eleventyNavigation: [Object],
page: [Object],
collections: [Object] },
date: 2020-08-07T14:56:04.150Z,
outputPath: '_site/mammals/index.html',
url: '/mammals/',
templateContent: [Getter/Setter] },
{ template:
Template {
inputPath: './index.njk',
inputDir: '.',
parsed: [Object],
extraOutputSubdirectory: '',
outputDir: '_site',
_extensionMap: [EleventyExtensionMap],
linters: [],
transforms: [],
plugins: {},
templateData: [TemplateData],
paginationData: {},
isVerbose: true,
isDryRun: false,
writeCount: 0,
skippedCount: 0,
wrapWithLayouts: false,
fileSlug: [TemplateFileSlug],
fileSlugStr: '',
filePathStem: '/index',
_templateRender: [TemplateRender],
inputContent:
'<h2>Full List</h2>\n\n{{ collections.all | log }}\n{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}\n\n<h2>Breadcrumb for Bats</h2>\n\n{{ collections.all | eleventyNavigationBreadcrumb("Bats") | eleventyNavigationToHtml | safe }}',
_config: [Object],
frontMatter: [Object],
dataCache: [Object],
computedData: [ComputedData] },
inputPath: './index.njk',
fileSlug: '',
filePathStem: '/index',
data: { pkg: [Object], page: [Object], collections: [Object] },
date: 2020-08-07T14:57:41.747Z,
outputPath: '_site/index.html',
url: '/',
templateContent: [Getter/Setter] } ]
> Having trouble rendering njk template ./index.njk
`TemplateContentRenderError` was thrown
> (./index.njk)
Error: Node does not exist: Bats
`Template render error` was thrown:
Template render error: (./index.njk)
Error: Node does not exist: Bats
at Object._prettifyError (/Users/jonwhite/Projects/11ty-navigation/node_modules/nunjucks/src/lib.js:36:11)
at /Users/jonwhite/Projects/11ty-navigation/node_modules/nunjucks/src/environment.js:561:19
at Template.root [as rootRenderFunc] (eval at _compile (/Users/jonwhite/Projects/11ty-navigation/node_modules/nunjucks/src/environment.js:631:18), <anonymous>:22:3)
at Template.render (/Users/jonwhite/Projects/11ty-navigation/node_modules/nunjucks/src/environment.js:550:10)
at /Users/jonwhite/Projects/11ty-navigation/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:236:14
at new Promise (<anonymous>)
at /Users/jonwhite/Projects/11ty-navigation/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:235:14
at Template.render (/Users/jonwhite/Projects/11ty-navigation/node_modules/@11ty/eleventy/src/TemplateContent.js:199:28)
Eleventy:UserConfig Resetting EleventyConfig to initial values. +0ms
Eleventy:Config Setting up global TemplateConfig. +0ms
Eleventy:UserConfig Adding universal filter 'slug' +10ms
Eleventy:UserConfig Adding universal filter 'url' +2ms
Eleventy:UserConfig Adding universal filter 'log' +0ms
Eleventy:UserConfig Adding universal filter 'getCollectionItem' +0ms
Eleventy:UserConfig Adding universal filter 'getPreviousCollectionItem' +1ms
Eleventy:UserConfig Adding universal filter 'getNextCollectionItem' +0ms
Eleventy:TemplateConfig rootConfig { templateFormats: [ 'liquid', 'ejs', 'md', 'hbs', 'mustache', 'haml', 'pug', 'njk', 'html', 'jstl', '11ty.js' ], pathPrefix: '/', markdownTemplateEngine: 'liquid', htmlTemplateEngine: 'liquid', dataTemplateEngine: 'liquid', passthroughFileCopy: true, htmlOutputSuffix: '-o', jsDataFileSuffix: '.11tydata', keys: { package: 'pkg', layout: 'layout', permalink: 'permalink', permalinkRoot: 'permalinkBypassOutputDir', engineOverride: 'templateEngineOverride', computed: 'eleventyComputed' }, dir: { input: '.', includes: '_includes', data: '_data', output: '_site' }, filters: {}, handlebarsHelpers: {}, nunjucksFilters: {} } +0ms
Eleventy:TemplateConfig Merging config with /Users/jonwhite/Projects/11ty-navigation/.eleventy.js +88ms
Eleventy:UserConfig Adding plugin (unknown name: check your config file). +95ms
Eleventy:TemplateConfig localConfig: { pathPrefix: '/sdljfkaldsjlfka/', templateFormats: undefined, filters: {}, linters: {}, layoutAliases: {}, passthroughCopies: {}, liquidOptions: {}, liquidTags: {}, liquidFilters: { slug: [Function], url: [Function], log: [Function], getCollectionItem: [Function], getPreviousCollectionItem: [Function], getNextCollectionItem: [Function] }, liquidShortcodes: {}, liquidPairedShortcodes: {}, nunjucksFilters: { slug: [Function], url: [Function], log: [Function], getCollectionItem: [Function], getPreviousCollectionItem: [Function], getNextCollectionItem: [Function], eleventyNavigation: [Function], eleventyNavigationBreadcrumb: [Function], eleventyNavigationToHtml: [Function] }, nunjucksAsyncFilters: {}, nunjucksTags: {}, nunjucksAsyncShortcodes: {}, nunjucksShortcodes: {}, nunjucksAsyncPairedShortcodes: {}, nunjucksPairedShortcodes: {}, handlebarsHelpers: { slug: [Function], url: [Function], log: [Function], getCollectionItem: [Function], getPreviousCollectionItem: [Function], getNextCollectionItem: [Function] }, handlebarsShortcodes: {}, handlebarsPairedShortcodes: {}, javascriptFunctions: { slug: [Function], url: [Function], log: [Function], getCollectionItem: [Function], getPreviousCollectionItem: [Function], getNextCollectionItem: [Function] }, pugOptions: {}, ejsOptions: {}, markdownHighlighter: null, libraryOverrides: {}, dynamicPermalinks: true, useGitIgnore: true, dataDeepMerge: false, watchJavaScriptDependencies: true, additionalWatchTargets: [], browserSyncConfig: {}, chokidarConfig: {}, watchThrottleWaitTime: 0, frontMatterParsingOptions: undefined, dataExtensions: Map {}, extensionMap: Set {}, quietMode: false, events: EventEmitter { _events: [Object: null prototype] {}, _eventsCount: 0, _maxListeners: undefined } } +11ms
Eleventy:TemplateConfig overrides: {} +456ms
Eleventy:TemplateConfig Current configuration: { templateFormats: [ 'liquid', 'ejs', 'md', 'hbs', 'mustache', 'haml', 'pug', 'njk', 'html', 'jstl', '11ty.js' ], pathPrefix: '/sdljfkaldsjlfka/', markdownTemplateEngine: 'liquid', htmlTemplateEngine: 'liquid', dataTemplateEngine: 'liquid', passthroughFileCopy: true, htmlOutputSuffix: '-o', jsDataFileSuffix: '.11tydata', keys: { package: 'pkg', layout: 'layout', permalink: 'permalink', permalinkRoot: 'permalinkBypassOutputDir', engineOverride: 'templateEngineOverride', computed: 'eleventyComputed' }, dir: { input: '.', includes: '_includes', data: '_data', output: '_site' }, filters: {}, handlebarsHelpers: { slug: [Function], url: [Function], log: [Function], getCollectionItem: [Function], getPreviousCollectionItem: [Function], getNextCollectionItem: [Function] }, nunjucksFilters: { slug: [Function], url: [Function], log: [Function], getCollectionItem: [Function], getPreviousCollectionItem: [Function], getNextCollectionItem: [Function], eleventyNavigation: [Function], eleventyNavigationBreadcrumb: [Function], eleventyNavigationToHtml: [Function] }, linters: {}, layoutAliases: {}, passthroughCopies: {}, liquidOptions: {}, liquidTags: {}, liquidFilters: { slug: [Function], url: [Function], log: [Function], getCollectionItem: [Function], getPreviousCollectionItem: [Function], getNextCollectionItem: [Function] }, liquidShortcodes: {}, liquidPairedShortcodes: {}, nunjucksAsyncFilters: {}, nunjucksTags: {}, nunjucksAsyncShortcodes: {}, nunjucksShortcodes: {}, nunjucksAsyncPairedShortcodes: {}, nunjucksPairedShortcodes: {}, handlebarsShortcodes: {}, handlebarsPairedShortcodes: {}, javascriptFunctions: { slug: [Function], url: [Function], log: [Function], getCollectionItem: [Function], getPreviousCollectionItem: [Function], getNextCollectionItem: [Function] }, pugOptions: {}, ejsOptions: {}, markdownHighlighter: null, libraryOverrides: {}, dynamicPermalinks: true, useGitIgnore: true, dataDeepMerge: false, watchJavaScriptDependencies: true, additionalWatchTargets: [], browserSyncConfig: {}, chokidarConfig: {}, watchThrottleWaitTime: 0, frontMatterParsingOptions: undefined, dataExtensions: Map {}, extensionMap: Set {}, quietMode: false, events: EventEmitter { _events: [Object: null prototype] {}, _eventsCount: 0, _maxListeners: undefined } } +3ms
Eleventy:CommandCheck command: eleventy +0ms
Eleventy Eleventy warm up time (in ms) 1388.544114999997 +0ms
Eleventy:TemplatePassthroughManager Resetting counts to 0 +0ms
Eleventy:EleventyFiles /Users/jonwhite/Projects/11ty-navigation/.gitignore ignoring: !./node_modules/** +0ms
Eleventy:EleventyFiles /Users/jonwhite/Projects/11ty-navigation/.gitignore ignoring: !./_site/** +0ms
Eleventy Directories:
Eleventy Input: .
Eleventy Data: _data
Eleventy Includes: _includes
Eleventy Layouts: undefined
Eleventy Output: _site
Eleventy Template Formats: liquid,ejs,md,hbs,mustache,haml,pug,njk,html,jstl,11ty.js
Eleventy Verbose Output: false +7ms
Eleventy:EleventyFiles Searching for: [ './**/*.liquid', './**/*.ejs', './**/*.md', './**/*.hbs', './**/*.mustache', './**/*.haml', './**/*.pug', './**/*.njk', './**/*.html', './**/*.jstl', './**/*.11ty.js', './**/*.11ty.cjs', '!./node_modules/**', '!./_site/**', '!./_site/**', '!./_includes/**', '!./_data/**' ] +27ms
Eleventy:TemplateWriter Found: [ './bats.md', './humans.md', './index.njk', './mammals.md' ] +0ms
Eleventy:TemplatePassthroughManager TemplatePassthrough copy started. +198ms
Eleventy:TemplatePassthroughManager `passthroughFileCopy` config paths: {} +1ms
Eleventy:TemplatePassthroughManager `passthroughFileCopy` config normalized paths: [] +0ms
Eleventy:TemplateData Using '.11tydata' to find data files. +0ms
Eleventy:TemplateData getLocalDataPaths('./bats.md'): [ './bats.11tydata.js', './bats.11tydata.cjs', './bats.11tydata.json', './bats.json' ] +0ms
Eleventy:TemplateData Using '.11tydata' to find data files. +1ms
Eleventy:TemplateData getLocalDataPaths('./humans.md'): [ './humans.11tydata.js', './humans.11tydata.cjs', './humans.11tydata.json', './humans.json' ] +0ms
Eleventy:TemplateData Using '.11tydata' to find data files. +17ms
Eleventy:TemplateData getLocalDataPaths('./index.njk'): [ './index.11tydata.js', './index.11tydata.cjs', './index.11tydata.json', './index.json' ] +0ms
Eleventy:TemplateData Using '.11tydata' to find data files. +1ms
Eleventy:TemplateData getLocalDataPaths('./mammals.md'): [ './mammals.11tydata.js', './mammals.11tydata.cjs', './mammals.11tydata.json', './mammals.json' ] +0ms
Eleventy:TemplatePassthroughManager TemplatePassthrough copy finished. Current count: 0 +22ms
Eleventy:Template getMappedDate: using file created time for './bats.md' of 2020-08-07T14:55:57.369Z (from 1596812157369.0278) +0ms
Eleventy:TemplateWriter ./bats.md added to map. +142ms
Eleventy:Template getMappedDate: using file created time for './humans.md' of 2020-08-07T14:56:01.087Z (from 1596812161087.9565) +1ms
Eleventy:TemplateWriter ./humans.md added to map. +0ms
Eleventy:Template getMappedDate: using file created time for './index.njk' of 2020-08-07T14:57:41.747Z (from 1596812261747.322) +0ms
Eleventy:TemplateWriter ./index.njk added to map. +0ms
Eleventy:Template getMappedDate: using file created time for './mammals.md' of 2020-08-07T14:56:04.150Z (from 1596812164150.0222) +1ms
Eleventy:TemplateWriter ./mammals.md added to map. +1ms
Eleventy:TemplateMap Caching collections objects. +0ms
Eleventy:Template First round of computed data for './bats.md' +62ms
Eleventy:ComputedData 'page.url' accesses [] variables +0ms
Eleventy:ComputedData 'page.outputPath' accesses [] variables +1ms
Eleventy:ComputedData Computed data order of execution: [ 'page.url', 'page.outputPath' ] +1ms
Eleventy:Template First round of computed data for './humans.md' +6ms
Eleventy:ComputedData 'page.url' accesses [] variables +1ms
Eleventy:ComputedData 'page.outputPath' accesses [] variables +0ms
Eleventy:ComputedData Computed data order of execution: [ 'page.url', 'page.outputPath' ] +0ms
Eleventy:Template First round of computed data for './index.njk' +1ms
Eleventy:ComputedData 'page.url' accesses [] variables +1ms
Eleventy:ComputedData 'page.outputPath' accesses [] variables +0ms
Eleventy:ComputedData Computed data order of execution: [ 'page.url', 'page.outputPath' ] +26ms
Eleventy:Template First round of computed data for './mammals.md' +26ms
Eleventy:ComputedData 'page.url' accesses [] variables +1ms
Eleventy:ComputedData 'page.outputPath' accesses [] variables +0ms
Eleventy:ComputedData Computed data order of execution: [ 'page.url', 'page.outputPath' ] +0ms
Eleventy:TemplateMap Collection: collections.all size: 4 +40ms
Eleventy:TemplateMap Collection: collections.all size: 4 +1ms
Eleventy:Template Second round of computed data for './bats.md' +4ms
Eleventy:ComputedData Computed data order of execution: [] +3ms
Eleventy:Template Second round of computed data for './humans.md' +0ms
Eleventy:ComputedData Computed data order of execution: [] +0ms
Eleventy:Template Second round of computed data for './index.njk' +0ms
Eleventy:ComputedData Computed data order of execution: [] +0ms
Eleventy:Template Second round of computed data for './mammals.md' +0ms
Eleventy:ComputedData Computed data order of execution: [] +0ms
[ { template:
Template {
inputPath: './bats.md',
inputDir: '.',
parsed: [Object],
extraOutputSubdirectory: '',
outputDir: '_site',
_extensionMap: [EleventyExtensionMap],
linters: [],
transforms: [],
plugins: {},
templateData: [TemplateData],
paginationData: {},
isVerbose: false,
isDryRun: false,
writeCount: 0,
skippedCount: 0,
wrapWithLayouts: true,
fileSlug: [TemplateFileSlug],
fileSlugStr: 'bats',
filePathStem: '/bats',
_templateRender: [TemplateRender],
inputContent:
'---\neleventyNavigation:\n key: Bats\n parent: Mammals\n---',
_config: [Object],
frontMatter: [Object],
dataCache: [Object],
computedData: [ComputedData] },
inputPath: './bats.md',
fileSlug: 'bats',
filePathStem: '/bats',
data:
{ pkg: [Object],
eleventyNavigation: [Object],
page: [Object],
collections: [Object] },
date: 2020-08-07T14:55:57.369Z,
outputPath: '_site/bats/index.html',
url: '/bats/',
templateContent: [Getter/Setter],
_templateContent: '' },
{ template:
Template {
inputPath: './humans.md',
inputDir: '.',
parsed: [Object],
extraOutputSubdirectory: '',
outputDir: '_site',
_extensionMap: [EleventyExtensionMap],
linters: [],
transforms: [],
plugins: {},
templateData: [TemplateData],
paginationData: {},
isVerbose: false,
isDryRun: false,
writeCount: 0,
skippedCount: 0,
wrapWithLayouts: true,
fileSlug: [TemplateFileSlug],
fileSlugStr: 'humans',
filePathStem: '/humans',
_templateRender: [TemplateRender],
inputContent:
'---\neleventyNavigation:\n key: Bats\n parent: Mammals\n---',
_config: [Object],
frontMatter: [Object],
dataCache: [Object],
computedData: [ComputedData] },
inputPath: './humans.md',
fileSlug: 'humans',
filePathStem: '/humans',
data:
{ pkg: [Object],
eleventyNavigation: [Object],
page: [Object],
collections: [Object] },
date: 2020-08-07T14:56:01.087Z,
outputPath: '_site/humans/index.html',
url: '/humans/',
templateContent: [Getter/Setter],
_templateContent: '' },
{ template:
Template {
inputPath: './mammals.md',
inputDir: '.',
parsed: [Object],
extraOutputSubdirectory: '',
outputDir: '_site',
_extensionMap: [EleventyExtensionMap],
linters: [],
transforms: [],
plugins: {},
templateData: [TemplateData],
paginationData: {},
isVerbose: false,
isDryRun: false,
writeCount: 0,
skippedCount: 0,
wrapWithLayouts: true,
fileSlug: [TemplateFileSlug],
fileSlugStr: 'mammals',
filePathStem: '/mammals',
_templateRender: [TemplateRender],
inputContent:
'---\neleventyNavigation:\n key: Bats\n parent: Mammals\n---',
_config: [Object],
frontMatter: [Object],
dataCache: [Object],
computedData: [ComputedData] },
inputPath: './mammals.md',
fileSlug: 'mammals',
filePathStem: '/mammals',
data:
{ pkg: [Object],
eleventyNavigation: [Object],
page: [Object],
collections: [Object] },
date: 2020-08-07T14:56:04.150Z,
outputPath: '_site/mammals/index.html',
url: '/mammals/',
templateContent: [Getter/Setter] },
{ template:
Template {
inputPath: './index.njk',
inputDir: '.',
parsed: [Object],
extraOutputSubdirectory: '',
outputDir: '_site',
_extensionMap: [EleventyExtensionMap],
linters: [],
transforms: [],
plugins: {},
templateData: [TemplateData],
paginationData: {},
isVerbose: false,
isDryRun: false,
writeCount: 0,
skippedCount: 0,
wrapWithLayouts: false,
fileSlug: [TemplateFileSlug],
fileSlugStr: '',
filePathStem: '/index',
_templateRender: [TemplateRender],
inputContent:
'<h2>Full List</h2>\n\n{{ collections.all | log }}\n{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}\n\n<h2>Breadcrumb for Bats</h2>\n\n{{ collections.all | eleventyNavigationBreadcrumb("Bats") | eleventyNavigationToHtml | safe }}',
_config: [Object],
frontMatter: [Object],
dataCache: [Object],
computedData: [ComputedData] },
inputPath: './index.njk',
fileSlug: '',
filePathStem: '/index',
data: { pkg: [Object], page: [Object], collections: [Object] },
date: 2020-08-07T14:57:41.747Z,
outputPath: '_site/index.html',
url: '/',
templateContent: [Getter/Setter] } ]
Eleventy:TemplateContent Having trouble rendering njk template ./index.njk: '<h2>Full List</h2>\n\n{{ collections.all | log }}\n{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}\n\n<h2>Breadcrumb for Bats</h2>\n\n{{ collections.all | eleventyNavigationBreadcrumb("Bats") | eleventyNavigationToHtml | safe }}' +0ms
Eleventy:EleventyErrorHandler Problem writing Eleventy templates: +0ms
Eleventy:EleventyErrorHandler Having trouble rendering njk template ./index.njk
Eleventy:EleventyErrorHandler
Eleventy:EleventyErrorHandler `TemplateContentRenderError` was thrown +0ms
Eleventy:EleventyErrorHandler (error stack): TemplateContentRenderError: Having trouble rendering njk template ./index.njk
Eleventy:EleventyErrorHandler at Template.render (/Users/jonwhite/Projects/11ty-navigation/node_modules/@11ty/eleventy/src/TemplateContent.js:215:15)
Eleventy:EleventyErrorHandler at process._tickCallback (internal/process/next_tick.js:68:7) +0ms
Eleventy:EleventyErrorHandler (./index.njk)
Eleventy:EleventyErrorHandler Error: Node does not exist: Bats
Eleventy:EleventyErrorHandler
Eleventy:EleventyErrorHandler `Template render error` was thrown: +2ms
Eleventy:EleventyErrorHandler (error stack): Template render error: (./index.njk)
Eleventy:EleventyErrorHandler Error: Node does not exist: Bats
Eleventy:EleventyErrorHandler at Object._prettifyError (/Users/jonwhite/Projects/11ty-navigation/node_modules/nunjucks/src/lib.js:36:11)
Eleventy:EleventyErrorHandler at /Users/jonwhite/Projects/11ty-navigation/node_modules/nunjucks/src/environment.js:561:19
Eleventy:EleventyErrorHandler at Template.root [as rootRenderFunc] (eval at _compile (/Users/jonwhite/Projects/11ty-navigation/node_modules/nunjucks/src/environment.js:631:18), <anonymous>:22:3)
Eleventy:EleventyErrorHandler at Template.render (/Users/jonwhite/Projects/11ty-navigation/node_modules/nunjucks/src/environment.js:550:10)
Eleventy:EleventyErrorHandler at /Users/jonwhite/Projects/11ty-navigation/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:236:14
Eleventy:EleventyErrorHandler at new Promise (<anonymous>)
Eleventy:EleventyErrorHandler at /Users/jonwhite/Projects/11ty-navigation/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:235:14
Eleventy:EleventyErrorHandler at Template.render (/Users/jonwhite/Projects/11ty-navigation/node_modules/@11ty/eleventy/src/TemplateContent.js:199:28) +0ms
Eleventy:Benchmark Benchmark (Configuration): "log" Nunjucks Filter took 5ms (0.4%) +0ms
Eleventy:Benchmark Benchmark (Configuration): "eleventyNavigationToHtml" Nunjucks Filter took 1ms (0.0%) +0ms
Eleventy:Benchmark Benchmark (Aggregate): Searching the file system took 45ms (3.6%, called 2×, 22.4ms each) +0ms
Eleventy:Benchmark Benchmark (Aggregate): Template Read took 50ms (4.0%, called 4×, 12.5ms each) +0ms
Eleventy:Benchmark Benchmark (Aggregate): Template Compile took 26ms (2.1%, called 3×, 8.7ms each) +1ms
Eleventy:Benchmark Benchmark (Aggregate): Template Render took 4ms (0.3%, called 3×, 1.2ms each) +0ms
Using pathPrefix: /sdljfkaldsjlfka/
Wrote 0 files in 0.50 seconds (v0.11.0)
Eleventy Finished writing templates. +495ms
Eleventy
Eleventy Getting frustrated? Have a suggestion/feature request/feedback?
Eleventy I want to hear it! Open an issue: https://github.com/11ty/eleventy/issues/new +0ms
Start time: (2020-08-08 12:55:06 UTC) [treshold=1%]
# module time %
1 fs-extra (node_modules/fs-extra/lib/index.js) 55ms ▇▇▇ 4%
2 micromatch (node_modules/micromatch/index.js) 18ms ▇ 1%
3 ./pattern (node_modules/fast-glob/out/utils/pattern.js) 25ms ▇▇ 2%
4 ../utils (node_modules/fast-glob/out/utils/index.js) 30ms ▇▇ 2%
5 ./managers/tasks (node_modules/fast-glob/out/managers/tasks.js) 31ms ▇▇ 2%
6 @nodelib/fs.walk (node_modules/@nodelib/fs.walk/out/index.js) 16ms ▇ 1%
7 ../readers/stream (node_modules/fast-glob/out/readers/stream.js) 21ms ▇▇ 1%
8 ./providers/async (node_modules/fast-glob/out/providers/async.js) 27ms ▇▇ 2%
9 fast-glob (node_modules/fast-glob/out/index.js) 64ms ▇▇▇▇ 4%
10 ./_castPath (node_modules/lodash/_castPath.js) 18ms ▇ 1%
11 ./_baseSet (node_modules/lodash/_baseSet.js) 29ms ▇▇ 2%
12 lodash/set (node_modules/lodash/set.js) 30ms ▇▇ 2%
13 ./_baseMergeDeep (node_modules/lodash/_baseMergeDeep.js) 16ms ▇ 1%
14 ./_baseMerge (node_modules/lodash/_baseMerge.js) 24ms ▇▇ 2%
15 lodash/merge (node_modules/lodash/merge.js) 31ms ▇▇ 2%
16 semver (node_modules/semver/index.js) 29ms ▇▇ 2%
17 ./UserConfig (node_modules/@11ty/eleventy/src/UserConfig.js) 50ms ▇▇▇ 3%
18 ./EleventyConfig (node_modules/@11ty/eleventy/src/EleventyConfig.js) 54ms ▇▇▇ 4%
19 ./TemplateConfig (node_modules/@11ty/eleventy/src/TemplateConfig.js) 87ms ▇▇▇▇▇ 6%
20 ./Config (node_modules/@11ty/eleventy/src/Config.js) 656ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 43%
21 ./TemplateEngineManager (node_module...venty/src/TemplateEngineManager.js) 657ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 43%
22 ./EleventyExtensionMap (node_modules...eventy/src/EleventyExtensionMap.js) 658ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 43%
23 ./TemplateRender (node_modules/@11ty/eleventy/src/TemplateRender.js) 659ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 43%
24 ./TemplateData (node_modules/@11ty/eleventy/src/TemplateData.js) 823ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 54%
25 esprima (node_modules/esprima/dist/esprima.js) 22ms ▇▇ 1%
26 ../type/js/function (node_modules/js...ml/lib/js-yaml/type/js/function.js) 23ms ▇▇ 2%
27 ./schema/default_full (node_modules/...lib/js-yaml/schema/default_full.js) 26ms ▇▇ 2%
28 ./js-yaml/loader (node_modules/js-yaml/lib/js-yaml/loader.js) 45ms ▇▇▇ 3%
29 ./lib/js-yaml.js (node_modules/js-yaml/lib/js-yaml.js) 51ms ▇▇▇ 3%
30 js-yaml (node_modules/js-yaml/index.js) 52ms ▇▇▇ 3%
31 ./engines (node_modules/gray-matter/lib/engines.js) 52ms ▇▇▇ 3%
32 ./lib/defaults (node_modules/gray-matter/lib/defaults.js) 55ms ▇▇▇ 4%
33 gray-matter (node_modules/gray-matter/index.js) 70ms ▇▇▇▇ 5%
34 ./TemplateContent (node_modules/@11ty/eleventy/src/TemplateContent.js) 73ms ▇▇▇▇ 5%
35 ./Template (node_modules/@11ty/eleventy/src/Template.js) 91ms ▇▇▇▇▇ 6%
36 globby (node_modules/globby/index.js) 20ms ▇ 1%
37 del (node_modules/del/index.js) 29ms ▇▇ 2%
38 ./lib/copy (node_modules/recursive-copy/lib/copy.js) 44ms ▇▇▇ 3%
39 recursive-copy (node_modules/recursive-copy/index.js) 44ms ▇▇▇ 3%
40 ./TemplatePassthrough (node_modules/...leventy/src/TemplatePassthrough.js) 45ms ▇▇▇ 3%
41 ./TemplatePassthroughManager (node_m.../src/TemplatePassthroughManager.js) 46ms ▇▇▇ 3%
42 ./EleventyFiles (node_modules/@11ty/eleventy/src/EleventyFiles.js) 47ms ▇▇▇ 3%
43 ./TemplateWriter (node_modules/@11ty/eleventy/src/TemplateWriter.js) 153ms ▇▇▇▇▇▇▇▇ 10%
44 ./src/Eleventy (node_modules/@11ty/eleventy/src/Eleventy.js) 993ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 65%
45 ./lib/ (node_modules/markdown-it/lib/index.js) 52ms ▇▇▇ 3%
46 markdown-it (node_modules/markdown-it/index.js) 53ms ▇▇▇ 3%
47 ./Engines/Markdown (node_modules/@11ty/eleventy/src/Engines/Markdown.js) 55ms ▇▇▇ 4%
48 ./compiler (node_modules/nunjucks/src/compiler.js) 16ms ▇ 1%
49 ./src/environment (node_modules/nunjucks/src/environment.js) 28ms ▇▇ 2%
50 nunjucks (node_modules/nunjucks/index.js) 34ms ▇▇ 2%
51 ./Engines/Nunjucks (node_modules/@11ty/eleventy/src/Engines/Nunjucks.js) 36ms ▇▇ 2%
52 ./Engines/Liquid (node_modules/@11ty/eleventy/src/Engines/Liquid.js) 18ms ▇ 1%
Total require(): 1206
Total time: 1.5s
Hello,
From what I can understand and what I see here. It seems like supporting Liquid templates would not be much of an issue.
Can we get support for liquid templates in future please?
Thank you
This is the code I am using:
{{ collections.all | eleventyNavigation | eleventyNavigationToHtml({
listElement: "ul",
listItemElement: "li",
listClass: "[ nav-main ] [ flex flex-row items-center ] [ uppercase ]",
listItemClass: "[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]",
listItemHasChildrenClass: "test",
activeListItemClass: "[ border-secondary ][ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]",
activeKey: eleventyNavigation.key,
showExcerpt: false
}) | safe }}
The HTML that is rendered:
<ul class="[ nav-main ] [ flex flex-row items-center ] [ uppercase ]"><li class="[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ] [ border-secondary ][ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]"><a href="/">Home</a></li>
<li class="[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]"><a href="/tyres/">Tyres</a><ul><li class="[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]"><a href="/goodyear/">Goodyear</a></li></ul></li>
<li class="[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]"><a href="/wheels/">Wheels</a></li>
<li class="[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]"><a href="/services/">Services</a></li>
<li class="[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]"><a href="/batteries/">Batteries</a></li>
<li class="[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]"><a href="/about-us/">AboutUs</a></li></ul>
I expected the LI's that have a UL (children) to have a class of 'test' but as you can see, thats not the case.
Do I need to add any front matter to the parent page to say it has children?
What have I done wrong?
As mentioned on (12) Eleventy Build went from 54s to 17s—Memory/Performance Wins 🏆 on 2.0.0-canary.9—Weekly №10 2022-W18 - YouTube, new in Navigation 0.3.3 is the allowMissing option.
The Nunjucks code example under the heading Allow missing pages (nodes) in breadcrumbs shows the includeSelf key instead of allowMissing.
Define all items in global data file. Like so:
_data/navigation.yaml
items:
- key: home
title: Home
url: /
children:
- key: Second
title: Second
url: /
children:
- key: contact
title: Contact
url: /contact
Retroactive issue, this is already documented: https://www.11ty.dev/docs/plugins/navigation/#overriding-the-url
🤔 Is there something preventing the Nunjucks-specific functionality from being converted to universal filters/shortcodes?
I'm trying to get a paginated global dataset to add items for use with the navigation plugin, but only the first item in the paginated set gets added.
The following is the navigation dump once 10 items have been paginated:
Snippet from layouts/main.njk:
{% set navPages = collections.all | eleventyNavigation %}
{{ navPages | dump }}
Generates:
[{"key":"Jackie Chan","title":"Jackie Chan","url":"/influencer/jackie-chan/","pluginType":"eleventy-navigation","children":[{"key":"JC-SKU1","title":"JC-SKU1","parent":"Jackie Chan","url":"/influencer/jackie-chan/jc-sku1/","pluginType":"eleventy-navigation","parentKey":"Jackie Chan","children":[]}]}]
Only 1 item appears for each of the paginated sets. In this case influencers and influencer products paginated sets.
Example from the influencer products frontmatter:
---
layout: layouts/main.njk
pagination:
data: influencer_products
size: 1
alias: product
permalink: /influencer/{{product.channel | slug }}/{{ product.id | slug}}/
eleventyComputed:
eleventyNavigation:
key: "{{product.id}}"
title: "{{product.id}}"
parent: "{{product.channel}}"
title: "Product: {{product.channel}}"
---
I have also tried doing this without using frontmatter and injecting eleventyComputed output from js and that results in the same output.
Can navigation be used in this way with pagination ?
The README send to 11ty.dev for the full doc buth there the documentation is for the version 0.1.4 ... where can I find the doc for the latest version?
I have a navigation entry named writing, with several child pages. Each child page has one or more tags. To facilitate easy browsing, I want to be able to display the tags of each child page (along with other metadata) when rendering the navigation <ul>.
/writing/moby-dick.md
---
title: &title Moby-Dick
author: Herman Melville
tags:
- fiction
- whale
eleventyNavigation:
key: moby-dick
title: *title
parent: writing
---/writing/a-brief-history-of-time.md
---
title: &title A Brief History of Time
author: Stephen Hawking
tags:
- non-fiction
- physics
eleventyNavigation:
key: a-brief-history-of-time
title: *title
parent: writing
---/writing/index.html (rendered)
<ul>
<li>
<a href="/writing/moby-dick" class="title">Moby-Dick</a> by Herman Melville
<ul>
<li><a href="collection/fiction" class="tag">#fiction</a></li>
<li><a href="collection/whale" class="tag">#whale</a></li>
</ul>
</li>
<li>
<a href="/writing/a-brief-history-of-time" class="title">A Brief History of Time</a> by Stephen Hawking
<ul>
<li><a href="collection/non-fiction" class="tag">#non-fiction</a></li>
<li><a href="collection/physics" class="tag">#physics</a></li>
</ul>
</li>
</ul>See Archive of Our Own for a live example.
But at the moment, page-specific information like tags or author isn't included in the entry returned by eleventyNavigation, making implementing this challenging.
Inspired by the collection item data structure, add a field data to the entry returned by eleventyNavigation. This field would contain all data for this piece of content (includes any data inherited from layouts), minus the eleventyNavigation field (to avoid infinite recursion).
With this implemented, the above example could be written as:
/writing/index.njk
{% set navPages = collections.all | eleventyNavigation(eleventyNavigation.key) %}
<ul>
{%- for entry in navPages %}
<li>
<a href="{{ entry.url | url }}">{{ entry.title }}</a> by {{ entry.data.author }}
<ul>
{% for tag in entry.data.tags %}
<li>
<a href="collection/{{ tag }}">#{{ tag }}</a>
</li>
{% endfor %}
</ul>
</li>
{%- endfor %}
</ul>I've reinstalled the plugin, I double-checked the const and addPlugin lines in .eleventy.js
Really odd, never seen this one before. Any ideas why this would happen?
It seems that the includeSelf option for the eleventyNavigationBreadcrumb filter doesn't work with Liquid templates. This does not include the current page in the breadcrumb trail:
{{ collections.all | eleventyNavigationBreadcrumb: eleventyNavigation.key, includeSelf: true | eleventyNavigationToHtml }}
The problem is here:
function findBreadcrumbEntries(nodes, activeKey, options = {}) {
...
if(options.includeSelf) {
deps.push(activeKey);
}
When using Liquid templates, options is actually an array [ 'includeSelf', true ]
Substituting the if statement with the following fixes it:
if(options.includeSelf || ( Array.isArray(options) && options[options.indexOf('includeSelf')])) {
Versions:
"@11ty/eleventy": "^1.0.0-beta.8",
"@11ty/eleventy-navigation": "^0.3.2",
Could someone explain why I don't get any data for breadcrumbs?
---
eleventyNavigation:
key: My Page Title
parent: myParentKey
---
{% set crumbs = collections.all | eleventyNavigationBreadcrumb(eleventyNavigation.key) %}
{% for crumb in crumbs %}
<a class="crumb" href="{{ crumb.url | url }}">{{ crumb.title }}</a>
...
{% endfor %}
Couple of questions please:
Because that is what I'm currently getting in my output.
I'm using:
"@11ty/eleventy-navigation": "^0.3.2"
I have about 8 parent pages where I've put front matter for the plugin, using some variant of the following:
eleventyNavigation:
key: Blog
order: 6
And I try to access that on my navigation page with:
{%- for item in collections.all | eleventyNavigation -%}
code...
{% endfor %}
But I don't get any key or title in the output.
However, I do get other fields, such as url, plugin-type, and order.
I also get every page in the collection, not just the parents.
Eg. I try this dump:
{{ collections.all | eleventyNavigation | dump }}
And I get all pages, not just the 8 in which I've added the navigation front matter, as per this snapshot:
[
{"url":"/admin/","pluginType":"eleventy-navigation"},
{"url":"/audio-livres/audible/","pluginType":"eleventy-navigation"},
{"url":"/audio-livres/scribd/","pluginType":"eleventy-navigation"},
{"url":"/feuilletons/lapocalypse-est-notre-chance/","pluginType":"eleventy-navigation"},
{"url":"/feuilletons/lappel-des-abysses/","pluginType":"eleventy-navigation"},
{"url":"/feuilletons/les-aventures-de-harry-lime/","pluginType":"eleventy-navigation"},
:
etc
:
{"order":1,"url":"/","pluginType":"eleventy-navigation"},
{"order":2,"url":"/grammar/","pluginType":"eleventy-navigation"},
{"order":7,"url":"/about/","pluginType":"eleventy-navigation"},
{"order":8,"url":"/contact/","pluginType":"eleventy-navigation"}
]
Seems odd, and a bit different to what I was expecting.?
While using "@11ty/eleventy": "^1.0.0-canary.15" trying to install @11ty/eleventy-navigation I receive this error:
Could not resolve dependency:
npm ERR! peer @11ty/eleventy@">=0.7.0" from @11ty/[email protected]
npm ERR! node_modules/@11ty/eleventy-navigation
npm ERR! dev @11ty/eleventy-navigation@"*" from the root project
Is this because of the string in the branch/version name?
It's possible to put permalink: false on a page to exclude it from the output, but keep some eleventyNavigation data on it to create parent items in the navigation tree. The HTML output currently creates a link for these entries with an empty href, so they link to the current page. It'd be nice to just exclude the link if url is false.
Hi,
Default order value = 0, means not-ordered items are going to be before the ordered ones....
Shouldn't it be the opposite?
I remain unsure whether this should be handled by an array or 'for' iteration or what. In the meantime, I have this partially working by simply copying the 'docs-toc.njk' contents (from the 11ty website) into the top of my template and then duplicating it, filtering each section. This is fine for my test site, but I have a real-world site with many more parent/child components and I don't want all that clutter in a template.
So - what's the best way to have all children nav items show up underneath a parent toggle? (see screenshot)
Thank you for this great plugin first of all.
I wondered if it's possible to only render items 1 level deep of the current level.
My render code:
{{ collections.all | eleventyNavigation(eleventyNavigation.key) | eleventyNavigationToHtml | safe }}
level0
-level1
-level1
--level2
-level1
So when current navigation is @ level0, I don't want to display level2 or deeper items.
edit:
And if this is possible. Is there a function to navigate a level higher from current level?
Currently using the breadcrumb, but it shows all levels higher.
No License file exists in this repo. What's the License for this plugin?
Thanks for this wonderful plugin and love eleventy. But is there a way I can get active class on the parent selecter ?
Hi, thank you for a very useful plugin. I was wondering of something like Prev/Next button is possible for items that prepared by eleventyNavigation?
Some think like:
{% set previousChapter = collections.chapters | eleventyNavigation | getPreviousCollectionItem(page) %}
{% set nextChapter = collections.chapters | eleventyNavigation | getNextCollectionItem(page) %}Right now, if I have nested navigation, the Prev/Next code in this section but as you might have guess, the items would not be in the same order.
Thank you very much
I am trying to access the default 11ty front matter data (or even just page entries) when going through eleventy-navigation entries, but that data doesn't seem accessible.
How could I access something like page.date in this situation:
{% set listing = collections.all | eleventyNavigation(key) %}
{% for item in listing %}
<p> {{ item.page.date }} </p>
{% endfor %}
Notably, this is how it works on 11ty-website: https://github.com/11ty/11ty-website/blob/7f56096f45f4425be706f5297f530f43677c8d32/src/docs/serverless-collections-export.11ty.js#L10
After using it like this
<ol class="column is-one-fifth toc">
{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
</ol>
<div class="column is-three-fifths">
<div class="container">
{{ content }}
</div>
<div class="column is-one-fifth">
it dumps raw data on me:
[{"template":{"inputPath":"./index.html","inputDir":".","parsed":{"root":"","dir":".","base":"index.html","ext":".html","name":"index","extname":".html","basename":"index.html","dirname":".","stem":"index","path":"./index.html","absolute":"...","isAbsolute":false},"extraOutputSubdirectory":"","outputDir":"_site","linters":[],"transforms":[],"plugins":{},"templateData":{"config":{"templateFormats":["liquid","ejs","md","hbs","mustache","haml","pug","njk","html","jstl","11ty.js"],"pathPrefix":"/","markdownTemplateEngine":"liquid","htmlTemplateEngine":"liquid","dataTemplateEngine":"liquid","passthroughFileCopy":true,"htmlOutputSuffix":"-o","jsDataFileSuffix":".11tydata","keys":{"package":"pkg","layout":"layout","permalink":"permalink","permalinkRoot":"permalinkBypassOutputDir","engineOverride":"templateEngineOverride"},"dir":{"input":".","includes":"_includes","data":"_data","output":"_site"},"filters":{},"handlebarsHelpers":{},"nunjucksFilters":
etc.
The content is showing fine.
I personally do not use Eleventy’s 18n plugin, but anyway it would be nice if this plugin could give the possibility to choose to display the navigation bar in a different language, according to the page’s language. Of course, nav URLs should change accordingly.
Hi, I'm just wondering if you can conditionally render container nodes by querying if a current page has a key or parent?
Most of the navigation examples, contain ul around the loop, however if there are no posts to bring back, we're left with an empty ul. Is there any way we can circumvent that?
i.e:
{% set navPages = collections.all | eleventyNavigation('specific-key') %}
{% if post.key %} or {% if post.parent %}
<ul>
{%- for entry in navPages %}
<li{% if entry.url == page.url %} class="my-active-class"{% endif %}>
<a href="{{ entry.url | url }}">{{ entry.title }}</a>
</li>
{%- endfor %}
</ul>
{% endif %}
Apologies if the answer is obvious, I'm a little bit of a noob with nunjucks. :)
Why is this plugin not named using the same convention as other plugins? Especially when there are other tools in this repo which are not plugins, but helpers. Would be good to maintain the distinction.
#/index.njk
---
layout: false
permalink: /index.html
title: "Layout"
locale: en
dir: ltr
eleventyNavigation:
key: en
title: Start Page
---#/test2.njk
---
layout: false
permalink: /test2.html
title: "Layout"
locale: en
dir: ltr
eleventyNavigation:
key: demo
title: Demo
---/*eleventryComputed.js*/
module.exports = {
locale: (data) => {
return data.locale || 'en'
},
eleventyNavigation: {
key: (data) => {
if (data.eleventyNavigation.key || data.translationKey) {
return (
data.locale +
'_' +
(data.eleventyNavigation.key || data.translationKey)
)
}
let tk = data.page.inputPath.split('/').slice(3).join('/')
return tk
},
title: (data) => data.eleventyNavigation.title || data.title,
parent: (data) => {
if (data.eleventyNavigation.parent || data.parent) {
return (
data.locale + '_' + (data.eleventyNavigation.parent || data.parent)
)
}
return data.locale
},
},
sitemap: (data) => {
data.priority = data.priority || 0.5
data.changefreq = data.changefreq || 'monthly'
return ''
},
translationKey: (data) => {
// remove "./src/{{locale}}" from path
if (data.translationKey) {
return data.translationKey
}
let tk = data.page.inputPath.split('/').slice(3).join('/')
return tk
},
}I'd like to put attribute on the list item class, especially ones that can't be classes, like slot. You can almost do this with putting attributes in the listIElement option, they just also end up in the closing tag, which while not invalid HTML, is kind of ugly.
Hi,
I am looking into using this plugin and I think it would dramatically reduce the amount of time I would need building a page 'by hand'. One of the thing I need is the ability to add links to sub section of a page and not just the page itself. I read over the docs on 11ty docs page but not sure if this could be done. I was wondering if anybody might have a solution for this?
Thank you very much!
I propose the eleventyNavigation use the title attribute to also create the HTML title attribute. It's not perfect. Som screen readers will override with aria-label if present. https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships. IF the title attribute is present in a link, the screen reader will use it.
Hi! Trying to use this plugin to organize my notes. Since i can't give all my notes a key, i just add parent but it gives "undefined" as title. in my frontmatter there is already title and when i set a title for navigation it gives "duplicated mapping key error".
Here is an example;
Parent:
---
layout: docs
eleventyNavigation:
key: Tarih
---
Child:
---
title: Lorem ipsum
layout: docs
date: 2019-10-03T19:36:17.272Z
weight: 5
eleventyNavigation:
parent: Tarih
---
When i do this:
---
title: Lorem ipsum
layout: docs
date: 2019-10-03T19:36:17.272Z
weight: 5
eleventyNavigation:
parent: Tarih
title: Lorem ipsum
---
It gives error but i don't even want to use title since there is already one for all my notes. What should i do?
Not sure if this is a bug or as designed, but I didn't find it among the issues here, so I figured I'd mention it.
This does not work:
---
eleventyNavigation:
key: Home
order: 1
---
but this does:
---
eleventyNavigation:
key: Home
order: 1
---
As someone who uses tabs for all indentation everywhere, this is quite... annoying. Especially as auto-indent adjusts to tabs .
My sub-menu items are ordered very randomly if I don't specify an order number.
I have one sub-section with 140 or so (and more to come) and I really don't want to have to hand-enter an order number on each one. How can I force this to just sort menu items alphabetically?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.