More Premium Hugo Themes Premium Eleventy Themes

Eleventy Navigation

A plugin for creating hierarchical navigation in Eleventy projects. Supports breadcrumbs too!

Eleventy Navigation

A plugin for creating hierarchical navigation in Eleventy projects. Supports breadcrumbs too!

Author Avatar Theme by 11ty
Github Stars Github Stars: 104
Last Commit Last Commit: May 8, 2025 -
First Commit Created: Aug 27, 2024 -
default image

Overview

eleventy-navigation is a plugin designed to create hierarchical navigation in Eleventy projects. It offers support for breadcrumbs and is used in production on 11ty.dev.

Features

  • Hierarchical Navigation: Create structured navigation menus in Eleventy projects.
  • Breadcrumbs Support: Easily add breadcrumb navigation to your site.
  • Used on 11ty.dev: Production-tested plugin used on the official 11ty documentation site.

Installation

To install the eleventy-navigation plugin, you can use npm. Run the following command in your Eleventy project directory:

npm install @11ty/eleventy-navigation --save-dev

Next, add the plugin to your .eleventy.js config file:

const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventyNavigationPlugin);
};

Summary

eleventy-navigation is a powerful plugin for creating hierarchical navigation and breadcrumb support in Eleventy projects. With its production usage on 11ty.dev, it is a reliable choice for enhancing navigation in your Eleventy sites.