Prev/Next for items in eleventyNavigation items

[khoivan88]

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

[aomarks]

I also ran into this, so I added a filter to flatten the navigation hierarchy, and add prev and next properties:

/**
 * Flatten a navigation object into an array, and add "next" and "prev"
 * properties.
 */
eleventyConfig.addFilter('flattenNavigationAndAddNextPrev', (nav) => {
  const flat = [];
  const visit = (items) => {
    for (const item of items) {
      flat.push(item);
      visit(item.children);
    }
  };
  visit(nav);
  for (let i = 0; i < flat.length; i++) {
    const item = flat[i];
    item.prev = flat[i - 1];
    item.next = flat[i + 1];
  }
  return flat;
});

Then in my template I did something like this:

{% set flatNavItems = collections.docs | eleventyNavigation | flattenNavigationAndAddNextPrev %}
{% for item in flatNavItems %}
  {% if item.url === page.url %}
    {% if item.prev %}
      <a href="{{ item.prev.url }}">
        Previous: {{ item.prev.title }}
      </a>
    {% endif %}

    {% if item.next %}
      <a href="{{ item.next.url }}">
        Next: {{ item.next.title }}
      </a>
    {% endif %}
  {% endif %}
{% endfor %}

Hope that helps.

[khoivan88]

Wow, that's cool. Thank you very much for sharing your solution. It has been a while so i don't remember what i did but this would be super helpful for my future project 😃. Thank you

[Muhammed-Rahif]

I also ran into this, so I added a filter to flatten the navigation hierarchy, and add prev and next properties:

/**
 * Flatten a navigation object into an array, and add "next" and "prev"
 * properties.
 */
eleventyConfig.addFilter('flattenNavigationAndAddNextPrev', (nav) => {
  const flat = [];
  const visit = (items) => {
    for (const item of items) {
      flat.push(item);
      visit(item.children);
    }
  };
  visit(nav);
  for (let i = 0; i < flat.length; i++) {
    const item = flat[i];
    item.prev = flat[i - 1];
    item.next = flat[i + 1];
  }
  return flat;
});

Then in my template I did something like this:

{% set flatNavItems = collections.docs | eleventyNavigation | flattenNavigationAndAddNextPrev %}
{% for item in flatNavItems %}
  {% if item.url === page.url %}
    {% if item.prev %}
      <a href="{{ item.prev.url }}">
        Previous: {{ item.prev.title }}
      </a>
    {% endif %}

    {% if item.next %}
      <a href="{{ item.next.url }}">
        Next: {{ item.next.title }}
      </a>
    {% endif %}
  {% endif %}
{% endfor %}

Hope that helps.

This worked like a charm when I edited the code like below, in template:

- {% set flatNavItems = collections.docs | eleventyNavigation | flattenNavigationAndAddNextPrev %}
+ {% set flatNavItems = collections.all | eleventyNavigation | flattenNavigationAndAddNextPrev %}

[bojidar-bg]

Decided to go for a slightly different function, inspired by aomarks, as I needed access to the parent/siblings/root relative to the current page:

eleventyConfig.addFilter('eleventyNavigationCurrent', (nav, currentUrl) => {
    let prev, current, next, parent, root
    const visit = (items, itemsParent, itemsRoot) => {
        for (const item of items) {
            if (item.url == currentUrl) {
                current = item
                parent = itemsParent
                root = itemsRoot
            } else if (!current) {
                prev = item
            } else {
                if (!next) {
                    next = item
                }
                return // Early exit, we found both the item and the next one
            }
            visit(item.children, item, itemsRoot || item)
        }
    }
    visit(nav, undefined, undefined)
    return {prev, current, next, parent, root}
});

Use as:

{% set navigation = collections.all | eleventyNavigation | eleventyNavigationCurrent(page.url) %}

{{ navigation.parent.title }}
{{ navigation.next.url }}
{% for child in navigation.current.children %}
...