eleventy-alap

Eleventy plugin for Alap — multi-target link menus for static sites.

Two modes: static (zero JS, plain HTML lists) or interactive (<alap-link> web components).

Install

Available in the Alap monorepo at integrations/eleventy-alap/.

Install from the monorepo

git clone https://github.com/DanielSmith/alap.git
cd alap
pnpm install
pnpm build
cd integrations/eleventy-alap
pnpm build

Then add it to your project as a local dependency in your package.json:

"eleventy-alap": "file:../path-to-alap/integrations/eleventy-alap"

Setup

// .eleventy.js (or eleventy.config.js)
import alapPlugin from 'eleventy-alap';
import config from './alap-config.json' with { type: 'json' };

export default function(eleventyConfig) {
  eleventyConfig.addPlugin(alapPlugin, { config });
}

Static Mode (Zero JS)

Resolve expressions at build time. The output is a plain <ul> — no JavaScript on the page.

{% alap ".nyc + .bridge" %}

Outputs:

<ul class="alap-menu">
  <li class="alap-item"><a href="https://..." target="fromAlap">Brooklyn Bridge</a></li>
  <li class="alap-item"><a href="https://..." target="fromAlap">Manhattan Bridge</a></li>
</ul>

Works with tags, macros, operators, and any Alap expression:

{% alap "@favorites" %}
{% alap ".coffee | .bridge" %}
{% alap ".nyc + .landmark - .tourist" %}

Interactive Mode (Web Component)

Output <alap-link> web components for client-side menus with click-to-open behavior:

{% alapLink ".coffee" %}cafes{% endalapLink %}

Outputs:

<alap-link query=".coffee">cafes</alap-link>

You'll need to include the Alap web component script on the page for interactive mode.

Filters

alapResolve

Returns the resolved link array for custom rendering:

{% set bridges = ".nyc + .bridge" | alapResolve %}
{% for link in bridges %}
  <a href="{{ link.url }}">{{ link.label }}</a>
{% endfor %}

alapCount

Returns the number of matching items:

{{ ".coffee" | alapCount }} cafes nearby

Options

Option	Type	Default	Description
config	AlapConfig	required	The Alap config object
menuClass	string	'alap-menu'	CSS class on the <ul>/<ol> wrapper
itemClass	string	'alap-item'	CSS class on each <li>
listType	'ul' | 'ol'	from config or 'ul'	List element type

Styling

Static mode outputs plain HTML — style it with your existing CSS:

.alap-menu {
  list-style: none;
  padding: 0;
}

.alap-item a {
  display: block;
  padding: 4px 0;
  color: inherit;
  text-decoration: underline;
}

Security

• All URLs are sanitized via sanitizeUrl() — javascript:, data:, vbscript: schemes are blocked
• All labels and URLs are HTML-escaped in static output
• Expression attributes are escaped in interactive output

License

Apache-2.0