Navigation: Add permalink/url data value?

[davidhund]

I was looking at how to create site navigation for my Eleventy test project.

I do not think Pagination is appropriate for this so I looked at Collections:
Add the following to pages that should have a navigation entry:

---
title: My page
tag: nav
slug: "my-page"
---
..

.. which would allow a nav.liquid partial to use collection.nav and the use of post.slug etc.

However, (as commented before) there is no easy way to get the 'current active page' and one would have to hardcode a href value (based on e.g. the slug).

This is why I've, for now, fallen back to almost hard-coding the entire navigation:

<ul role="navigation">
  <li><a {% if slug == "myslug" %}aria-current="page"{% else %}href="/myslug/"{% endif %}>My Page</a></li>
  <li><a {% if slug == "anotherslug" %}aria-current="page"{% else %}href="/anotherslug/"{% endif %}>Another Page</a></li>
</ul>

It would be great to have access to the implicit permalink (or url) for the current page.

Otherwise: what would be an Eleventy best-practice for creating site navigation?

[zachleat]

Added global page.url data variable—will be available in v0.2.7.

Documented here: https:/11ty/eleventy/#special-variables and https:/11ty/eleventy/blob/master/docs/collections.md#example-navigation-links-with-an-active-class-added-for-on-the-current-page

Do take note that tags must be plural in your front matter!

[davidhund]

🚀 Nice!