Alap Examples

Self-contained demos showing off the library. Each card opens a demo in a separate window.

Start Here

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)
Advanced CSS techniques with the DOM adapter
Advanced CSS (Web Component)
Advanced CSS techniques with ::part() styling

Framework Adapters

React
<AlapProvider> + <AlapLink> + useAlap() hook
Vue
<AlapProvider> + <AlapLink> + useAlap() composable
Svelte
<AlapProvider> + <AlapLink> — Svelte 5 runes
SolidJS
<AlapProvider> + <AlapLink> — fine-grained reactivity
Alpine.js
x-alap directive — no build step, sprinkle onto HTML

Positioning

Placement
All 9 compass placements, viewport fallback, edge flips, long menu clamping

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
External Data
Loading link configuration from external sources
Bluesky / AT Protocol
Authenticated feeds, search, combined static + live data
CDN / Script Tag
Zero npm, zero build step — just a <script> tag
htmx
Fragment swaps with hx-get — Alap menus inside htmx-loaded content
Next.js (simulated)
App Router layout/page pattern with React adapter
Markdown (remark-alap)
[text](alap:@macro) in Markdown → <alap-link> via remark plugin
CMS Content (rehype)
Transform existing HTML links into Alap menus with rehype
Tiptap Editor
Rich-text editor with inline <alap-link> nodes