Eleventy Partials

Learn how to break down your Eleventy pages into smaller “components” with partials in this Eleventy tutorial.

By Mike Neumegen

Partials are a way to include a snippet of code into a layout with the goal of reducing repetition or hiding some complexity. In this lesson, we’ll add a navigation bar to the site using a partial. While we could add the nav bar to our existing layout, it’s easier to maintain a site which is broken down into small components rather than sprawling thousand-line files.

Your first partial

Partials live in the _includes directory we’ve already created and typically have a convention of starting the filename with an underscore to distinguish them from layouts. Create /_includes/_nav.html with the following contents:

<nav>
 <ul>
   <li><a href="/">Home</a></li>
   <li><a href="/about/">About</a></li>
 </ul>
</nav>

That’s all there is to the navigation. Now we can include it in our layout. Open /_includes/page.html and add the following below </body>:

{% include '_nav.html' %}

Render the page and admire your new navigation.

Your second partial

Another great use for partials is to hide complexity. Typically the <head> will contain all sorts of asset references, SEO tags, social tags, and analytics scripts. I like to pull all of this HTML into a partial to simplify the layout and make the tags easier to find.

Create /_includes/_meta.html with the following contents:

<meta charset="utf-8">
<title>{{ title }}</title>
<link rel="stylesheet" href="/assets/main.css">

And replace the contents of <head> in /_includes/page.html with an include:

{% include '_meta.html' %}

The rendered site should look exactly the same, only this time it’s a little bit easier for you to maintain.

What’s next?

In the next lesson we’ll go over the basics of templating using Liquid in Eleventy.

Lessons in this Tutorial

Eleventy Beginner Tutorial Series

Previous lesson Next lesson