Eleventy: How to link to a page?

[atomtigerzoo]

Hi, sorry for the perhaps simple question, but I just don't get it :/

How can I link from - let's say the footer or any other page - to a given page inside11ty like the contact page contact.njk without writing /contact?

Or can I use something like my navigation.js file to create named links/pages and use those inside my templates or content?

[scottishstoater]

Hey 👋, don't be sorry. We are a friendly bunch of people.

You could create a footer.njk partial and manage the hardcoded links within that and reuse the component across the site.

---

You could also add a navigation.js in your _data folder and create a navigation struction and loop through it on the frontend.

Simple example would be:
navigation.js

module.exports = {
 'contact': '/contact'
}

Which you can reference globally using {{ navigation.contact }} eg:

<a href="{{ navigation.contact }}">Contact</a>

---

You could also programmatically generate a navigation list in a similar way:
navigation.js

module.exports = [
  {
    'label': 'Home',
    'url': '/'
  },
  {
    'label': 'About',
    'url': '/about'
  },
  {
    'label': 'Contact',
    'url': '/contact'
  }
]

You can then construct a navigation anywhere on your site.

<ul>
  {% for item in navigation %}
    <li><a href="{{ item.url }}">{{ item.label }}</a></li>
  {% endfor %}
</ul>

---

There's other ways to do this but this is a simple way to go about it. Using either helps you maintain the links in one place.

[atomtigerzoo]

Thank you very much for the explanations and examples :)

[scottishstoater]

@atomtigerzoo No problem :)

[zachleat]

YES THANK YOU @chrisssycollins—I love the tone you used here.

I feel like I should maybe also plug the eleventy-navigation plugin which handles some of this for you https://github.com/11ty/eleventy-navigation

[zachleat]

Maybe also upvote https://github.com/11ty/eleventy/issues/84 which would help here too

[zachleat]

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!