Identify eleventy-navigation page in a WebC component? #3406

VAggrippino · 2024-08-07T07:37:27Z

VAggrippino
Aug 7, 2024

How do I identify the current page using eleventy-navigation in a WebC component? If I use page.url in a webc:if, the value is always the same no matter what input file it's rendering.

The documentation for eleventy-navigation has examples for Liquid or Nunjucks that I thought would translate pretty easily to WebC.

I tried the activeListItemClass and activeAnchorClass options, along with eleventyNavigationToHtml, but it didn't work for me because $data.eleventyNavigation.key was always set to the value from the first file according to eleventyNavigation.order (Home, in this case). This kinda makes sense if it only processes and renders the component once, for the first file, and then re-uses what's already rendered.

Using my example code below, it identifies /projects/ as page.url on all the rendered pages. This makes less sense to me because it's not the first or the last value in the object. If it went by file name, key order, or the order I set with eleventyNavigation.order, it would be the second to last.

I added a console.log() to /node_modules/@11ty/eleventy-navigation/eleventy-navigation.js just in case it was processing the Projects key first. Every time I run it the values in the object match the order of the file names (alphabetical). This is different from my eleventyNavigation.order order, but Projects is second-to-last in either case.

I'd love to understand what's going on here and learn the right way™ to do this.

/_components/main-nav.webc:

<nav class="main-nav">
    <ul class="main-nav__list">
        <li class="main-nav__item" webc:for="entry of eleventyNavigation($data.collections.all)">
            <a :href="entry.url" @text="entry.key" webc:if="entry.url === page.url" class="main-nav__item__active"></a>
            <a :href="entry.url" @text="entry.key" webc:else></a>
        </li>
    </ul>
</nav>

My folder structure is as simple as possible:

/ 
    _components/
        main-nav.webc
    _includes/
        base.webc
    about.webc
    blog.webc
    home.webc
    projects.webc
    wiki.webc

This is just a reproduction of the problem, so the root files are all pretty much like this:

---
layout: base.webc
eleventyNavigation:
    key: Blog
    order: 1
---

<h2>Blog</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi placeat
provident nemo expedita incidunt alias ullam eligendi, inventore a beatae
laborum ducimus laboriosam aliquid aliquam, totam, est veniam animi
pariatur!</p>

And /_includes/base.webc is where I use the navigation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header><main-nav></main-nav></header>
    <main @html="content"></main>
</body>
</html>

And the rendered <nav> is always this:

    <header><nav class="main-nav">
    <ul class="main-nav__list">
        <li class="main-nav__item">
            
            <a href="/">Home</a>
        </li>
<li class="main-nav__item">
            
            <a href="/blog/">Blog</a>
        </li>
<li class="main-nav__item">
            <a href="/projects/" class="main-nav__item__active">Projects</a>
            
        </li>
<li class="main-nav__item">
            
            <a href="/wiki/">Wiki</a>
        </li>
<li class="main-nav__item">
            
            <a href="/about/">About</a>
        </li>
    </ul>
</nav>
</header>

VAggrippino · 2024-08-07T10:46:29Z

VAggrippino
Aug 7, 2024
Author

I got it to work using webc:if="entry.key === $data.eleventyNavigation.key".

I don't really want to close this discussion, though. I think the way I was trying to do it is consistent with the documentation. Did I discover a bug or just misunderstand the docs?

Did I miss some documentation? I don't even know where I got that $data part from. It's not needed in the Liquid or Nunjucks code. I think I just saw it in an example.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Identify eleventy-navigation page in a WebC component? #3406

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Identify eleventy-navigation page in a WebC component? #3406

VAggrippino Aug 7, 2024

Replies: 1 comment

VAggrippino Aug 7, 2024 Author

VAggrippino
Aug 7, 2024

VAggrippino
Aug 7, 2024
Author