Alap v3 Examples

Self-contained demos showing off the library.

Start Here

New to Alap? Go through these three in order.

• 1. Basic Item IDs, class queries, operators, parentheses, macros — the fundamentals
• 2. React Adapter <AlapProvider> + <AlapLink> + useAlap() — framework integration pattern
• 3. Web Component <alap-link> custom element — zero-framework, works everywhere

Theming

• Styling Offsets, per-anchor themes, custom item classes, image triggers
• Tailwind CSS Menu styled entirely with Tailwind utilities
• Advanced CSS — DOM Mode Advanced CSS effects using light DOM mode with standard <a class="alap"> elements
• Advanced CSS — Web Component 55+ CSS custom properties on <alap-link> for full theming and visual customization

Framework Adapters

• React <AlapProvider> + <AlapLink> + useAlap() hook — all rendering modes
• Vue <AlapProvider> + <AlapLink> + useAlap() composable — SFC templates
• Svelte <AlapProvider> + <AlapLink> + useAlap() — Svelte 5 runes
• SolidJS <AlapProvider> + <AlapLink> + useAlap() — fine-grained reactivity
• Alpine.js x-alap directive — no build step, sprinkle onto HTML
• htmx HTML fragment swaps via htmx — <alap-link> self-initializes after each swap, no framework
• Next.js App Router pattern — Alap in a Next.js application

Positioning

• Placement All 9 compass placements (N, NE, E, SE, S, SW, W, NW, C), viewport fallback, center popover — DOM + web component
• Placement Sandbox Visual test pages for the placement engine — verify menus never overflow the viewport across every adapter

Advanced

• Hooks & Media Image triggers, div triggers, image menu items, hover preview, context popup, event log
• Regex Search /key/opts syntax — field filtering, sorting, age limits, composition with operators
• Markdown (remark-alap) [text](alap:@macro) in Markdown → <alap-link> via remark plugin
• Tiptap Rich-Text Inline <alap-link> nodes in a Tiptap editor — side-by-side with live preview
• External Data Load config from JSON files or remote endpoints
• Bluesky / AT Protocol :atproto: protocol — live profiles, feeds, people search, post search, plus a combined page mixing allLinks + :web: + :atproto: in one expression
• CMS Content Transform rehype-alap plugin — transforms CMS HTML with <a href="alap:query"> links into <alap-link> web components
• CDN / Script Tag Zero npm, zero build step — load Alap via a <script> tag and go
• Lightbox Renderer Alternative renderer — menu items displayed in a lightbox overlay instead of a dropdown

Static Site Generators

These examples use their own build tools and run locally from your checkout — they are not available on examples.alap.info.

• Eleventy Run first: cd examples/sites/eleventy && pnpm devcopy (port 9990)
• Astro Integration Run first: cd examples/sites/astro-integration && ./serve.shcopy (port 9010)
• Hugo Run first: cd examples/sites/hugo && ./run.shcopy (port 9170, requires Podman)
• VitePress Run first: cd examples/sites/vitepress && pnpm devcopy