Sezer Ünlü

B.Sc. Computer scientist & front-end web engineer

How to add a navigation bar to your eleventy website

Published on

A navigation bar contains the most important links to intern pages or sections of your website. It can also contain links to external websites.

1. Create navigation data

Create a _data folder in the root directory. Go into it and create a navigation.js file with the following content:


module.exports = [
  {
    "label": "First menu link",
    "url": "/first-menu-link"
  },
  {
    "label": "Second menu link",
    "url": "/second-menu-link"
  },
  {
    "label": "Third menu link",
    "url": "/third-menu-link"
  }
]


2. Use navigation data in your template

Insert the following code snippet in your template where it should be rendered:


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