More Articles

How to Use Nunjucks Macros for Component Functionality in Eleventy

Master component-like functionality in Eleventy using Nunjucks macros. Simplify your static site development with reusable, customizable components.

Written on Jun 20, 2024 | About 2 min reading time

New tools in your inbox every Monday!

Using Nunjucks Macros for Component-Like Functionality in Eleventy

Eleventy is a fantastic static site generator, and when paired with Nunjucks macros, it can provide component-like functionality similar to more complex frameworks. Let's explore how to use Nunjucks macros to create reusable components in Eleventy.

Creating a Product Card Macro

Here's an example of a product card macro:


{% macro productCard(product) %}
<a href="{{ product.url }}" target="_blank">

  <div class="card card-default card-hover">

    <div class="card-top relative">
      <img class="width-1-1" src="{{ product.data.imagePath }}" alt="Avatar for {{ product.data.Title }}" loading="lazy">
    </div>

  <h3>{{ product.data.Title }}</h3>
  <span>$ {{ product.data.price }}</span><br>
  <p>{{ product.data.description | safe }}</p>

  </div>

</a>
{% endmacro %}

This macro creates a product card with an image, title, price, and description which are all dynamic and will be filled with the corresponding fields in your product frontmatter.

Importing and Using the Macro

To use this macro in your Eleventy templates, you first need to import it:


{% from 'components/cards/productCard.njk' import productCard %}

Notice that the name after 'import' (productCard) matches the macro name in the component file. This is important for the macro to work correctly.

Once imported, you can use the macro like this:



{%- for product in collections.products -%}
 {{ productCard( product = product ) }}
{%- endfor -%}

This code loops through all products and creates a card for each one.

Customizing Macros

You can pass as many options as you like to a macro, as long as they're set up in the macro definition. This makes macros very flexible and reusable, similar to components in more complex frameworks.

For example, let's modify our product card macro to accept a 'dark' option:



<!-- Card is automatically light unless specified  -->
{% macro productCard(product, dark = false) %}
<a href="{{ product.url }}" target="_blank">

<div class="{% if dark == true %}card-dark{% endif %} card card-default card-hover">
  <!-- Rest of the card content -->
</div>

</a>
{% endmacro %}

Now you can use this macro to create both light and dark product cards:



<!-- Light version -->
{{ productCard(product = product) }}

<!-- Dark version -->
{{ productCard(product = product, dark = true) }}

This flexibility allows you to easily create variations of your components without duplicating code, making your templates more maintainable and adaptable to different design needs.

Nesting Macros

Macros can also be nested within each other. For example, if you need a product grid to hold your product cards, you could create a grid macro and use the product card macro inside it.

Here's how you might create a product grid macro:



<!-- Don't forget to import it from its file path -->
{% from 'components/cards/productCard.njk' import productCard %} 

{% macro productGrid(products) %}<div class="product-grid">
  {%- for product in products -%}
    {{ productCard(product = product) }}
  {%- endfor -%}
</div>
{% endmacro %}

Then you could use this grid macro in your templates:



{% from 'components/grids/productGrid.njk' import productGrid %}

{{ productGrid(products = collections.products) }}

Conclusion

Using Nunjucks macros in Eleventy provides a simple yet powerful way to create reusable components. This approach can make Eleventy competitive with more complex frameworks like Astro for building static sites. By leveraging macros, you can create modular, maintainable templates that are easy to update and reuse across your site. Additional information available in the macros section in the Nunjucks docs.

July Featured Tools

Optimize Images

9 Image Optimization Tools In One Single Toolkit

Explore

Luna Task

An all-in-one privacy-focused todo list, notebook, habit and mood tracker, and pomodoro timer. It remembers stuff for you and knows what to work on next. Choose from a variety of productivity techniques to get stuff actually done.

Explore

We Recommend...

Top products featured for the article.

Publii

Publii is a desktop-based CMS for Windows, Mac and Linux that makes creating static websites fast and hassle-free, even for beginners.

Explore

Siteliner

Find duplicate content, broken links, and more...

Explore

Projector

From live presentations to social posts, email graphics, GIFs, and videos, Projector helps you create and share visuals for all your channels.

Explore

Fuse Studio

Create and customize your own wallet and crypto currency. Zero Coding Launch Platform for Entrepreneurs and Impact Leaders.

Explore

Sponsored

See all Tools

A Little Extra Reading

Feel like reading more? Here are some extra articles to check out!

See all Articles