← Examples Gallery

Themes & Composition

Complete themes combining multiple properties. Dark mode, glassmorphism, neon, brutalist, and more.

Dark Theme

Full dark mode: parks and landmarks.

All colors, focus ring, and shadow customized. Same HTML, completely different look.

.dark-section alap-link {
  --alap-bg: #1e1e2e;
  --alap-border: #313244;
  --alap-text: #cdd6f4;
  --alap-hover-bg: #313244;
  --alap-hover-text: #89b4fa;
  --alap-focus-ring: #89b4fa;
  --alap-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --alap-radius: 12px;
  --alap-corner-shape: squircle;
}

Auto Dark Mode

Menus follow your OS light/dark setting: coffee and bridges.

Uses @media (prefers-color-scheme: dark) to swap all custom properties at once.

/* Light mode (default) */
alap-link {
  --alap-bg: #ffffff;
  --alap-text: #1a1a1a;
  --alap-hover-bg: #eff6ff;
  --alap-hover-text: #2563eb;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  alap-link {
    --alap-bg: #1e1e2e;
    --alap-text: #cdd6f4;
    --alap-hover-bg: #313244;
    --alap-hover-text: #89b4fa;
  }
}

Borderless Floating

No border, large shadow, wide radius: everything.

A modern "card-style" dropdown with max-width constraint.

--alap-border-width: 0;
--alap-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
--alap-radius: 20px;
--alap-max-width: 280px;
--alap-corner-shape: squircle;

Neon

Neon glow with text shadow + colored shadow: bridges

Combines --alap-text-shadow, --alap-shadow, --alap-hover-text-shadow, and transitions for a full neon effect.

.neon alap-link {
  --alap-bg: #0a0a0a;
  --alap-border: #1a1a2e;
  --alap-text: #38bdf8;
  --alap-text-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
  --alap-hover-bg: #0f172a;
  --alap-hover-text: #7dd3fc;
  --alap-hover-text-shadow: 0 0 12px rgba(56, 189, 248, 0.8),
                             0 0 30px rgba(56, 189, 248, 0.4);
  --alap-shadow: 0 0 20px rgba(56, 189, 248, 0.15);
  --alap-transition: text-shadow 0.2s, background 0.15s, color 0.15s;
}

Glassmorphism

Frosted glass with backdrop blur: coffee spots

Semi-transparent background + --alap-backdrop for backdrop-filter. The gradient behind shows through the frosted glass.

--alap-bg: rgba(255, 255, 255, 0.12);
--alap-backdrop: blur(12px) saturate(180%);
--alap-border: rgba(255, 255, 255, 0.2);
--alap-text: #ffffff;
--alap-hover-bg: rgba(255, 255, 255, 0.25);
--alap-radius: 16px;
--alap-corner-shape: squircle;

Brutalist

Raw, heavy, industrial: bridges

Thick borders, uppercase, wide spacing, sharp corners, heavy shadow. No subtlety.

.brutalist alap-link {
  --alap-bg: #000000;
  --alap-border: #ffffff;
  --alap-border-width: 3px;
  --alap-text: #ffffff;
  --alap-hover-bg: #ffffff;
  --alap-hover-text: #000000;
  --alap-corner-shape: straight;
  --alap-radius: 0;
  --alap-text-transform: uppercase;
  --alap-letter-spacing: 0.1em;
  --alap-font-weight: 700;
  --alap-shadow: 8px 8px 0 #ffffff;
}

Focus Customization

Distinct focus vs hover styling (tab into the menu): coffee spots

Hover is blue, focus is orange. --alap-focus-bg and --alap-focus-text override hover defaults for keyboard users.

--alap-hover-bg: #eff6ff;
--alap-hover-text: #2563eb;
--alap-focus-bg: #fff7ed;
--alap-focus-text: #c2410c;
--alap-focus-ring: #ea580c;
--alap-focus-shadow: 0 0 0 3px rgba(234, 88, 12, 0.2);

Z-Index (Sticky Header)

Sticky Header (z-index: 50)

Menu appears above the sticky header: bridges.

--alap-z-index: 100 ensures the menu stacks above.

--alap-z-index: 100;

Wild Combo: Everything at Once

Squircle + neon + transitions + transform + item spacing + backdrop: coffee spots

This uses 20+ properties simultaneously. It's intentionally over-the-top to show that all properties compose cleanly.

.wild alap-link {
  --alap-bg: rgba(15, 23, 42, 0.85);
  --alap-backdrop: blur(8px);
  --alap-border: rgba(56, 189, 248, 0.3);
  --alap-radius: 20px;
  --alap-corner-shape: squircle;
  --alap-shadow: 0 0 30px rgba(56, 189, 248, 0.15);
  --alap-text: #7dd3fc;
  --alap-text-shadow: 0 0 6px rgba(56, 189, 248, 0.3);
  --alap-font-weight: 500;
  --alap-letter-spacing: 0.03em;
  --alap-text-transform: uppercase;
  --alap-font-size: 0.8rem;
  --alap-item-gap: 3px;
  --alap-item-border-radius: 8px;
  --alap-menu-padding: 0.5rem;
  --alap-hover-bg: rgba(56, 189, 248, 0.15);
  --alap-hover-text: #ffffff;
  --alap-hover-text-shadow: 0 0 12px rgba(56, 189, 248, 0.8);
  --alap-hover-shadow: inset 3px 0 0 #38bdf8;
  --alap-hover-transform: translateX(4px);
  --alap-transition: all 0.2s ease;
  --alap-focus-ring: #38bdf8;
  --alap-focus-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3);
  --alap-menu-hover-shadow: 0 0 40px rgba(56, 189, 248, 0.25);
  --alap-menu-transition: box-shadow 0.3s ease;
}

Custom Gap & Scrolling

Generous gap + scrollable long list: all places 

--alap-gap: 1rem;
--alap-max-width: 260px;