How to build and include components with 11ty & Nunjucks

First we’re going to create our components directory with our navbar.njk file.

In that file we’re going to create and set a variable navLinks so we can maintain an easy to find collection of our links names and paths, to loop over and spit out some UI.

{% 
  set linkList = [
    {'text': 'Home','url': '/'},
    {'text': 'Events','url': '/events/'}
  ] 
%}

<nav class="h-10 w-full">
  <ul class="flex p-7 gap-4 under items-center w-full h-full bg-neutral-800 text-gray-300 ">
    {% for link in linkList  %}
      <li class="hover:text-purple-600">
        <a class="{{ 'underline underline-offset-2' if link.url === page.url }}" href="{{ link.url }}">{{ link.text }}</a>
      </li>  
    {% endfor %}
  </ul>
</nav>

From there, all that’s left is for us to make sure it’s included inside of all our pages by moving it to our layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles.css" />

  <title>{{ title }}</title>
</head>
<body class="w-screen h-screen bg-slate-400 flex flex-col text-gray-800 align-center justify-center">  
  <div class="flex flex-col w-screen h-screen">
    
    {% include "components/navbar.njk" %} 
    
    <main>
      {{ content | safe }}
    </main>
  </div>
</body>
</html>