Cleanest Magnetic Nav ever: 0 line of JS with CSS Anchor Positioning ⚓️

Samuel DIDIER-LAURENT — Wed, 11 Feb 2026 16:45:50 +0000

Stop calculating offsets. Start anchoring. 🚀

We've all been there: handling getBoundingClientRect(), listening to scroll events, and fighting with ResizeObserver just to make a simple "magnetic" background follow a navigation link.

It's heavy, it's prone to "jank," and honestly? It should be handled by the browser.

Inspired by a recent technical challenge, I decided to rebuild a high-end "Glassmorphic" navigation using 0 lines of JavaScript.

The Secret Sauce: CSS Anchor Positioning 🍯

The Anchor Positioning API allows us to tether an element (our "glow" or "bubble") to another element (the menu link) declaratively. This is a game changer for UI consistency.

1. Tagging the Anchors

Instead of complex JS logic, we simply "name" our targets in CSS using anchor-name.

.nav-link.active {
  anchor-name: --active-link;
}

.nav-link:hover {
  anchor-name: --hover-link;
}

2. Moving the Bubble

The bubble doesn't need to know pixels. It just needs to know its anchor. By using position-anchor, the browser handles the coordinates for us.

.bubble-active {
  position: absolute;
  position-anchor: --active-link;

  /* Snap to all 4 sides of the anchor */
  top: anchor(top);
  left: anchor(left);
  right: anchor(right);
  bottom: anchor(bottom);

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

The "Lead Developer" Perspective: Why this matters? 🧠

As a Lead Frontend Developer, I always look for three things: Performance, Maintainability, and Accessibility.

Performance: Moving logic to the browser's rendering engine (CSS) keeps the main thread free for critical tasks.
Maintainability: 10 lines of CSS are easier to debug than 50 lines of JS positioning logic.
Inclusivity: By using standard HTML semantics and native CSS, we ensure better behavior across devices and screen readers.

Crafting the "Glass" Effect 💎

To get that premium feel, I used:

Layered Gradients: Simulating light reflection on the borders.
Isolation (Stacking Context): Using isolation: isolate on the nav to manage z-index effortlessly.
Subtle Inset Shadows: Giving the buttons a "carved" look.

Final Thoughts

The Anchor Positioning API is a game changer for tooltips, menus, and complex UI interactions. While browser support is still growing, it’s time to start experimenting with these native patterns.

What do you think? Is it time to ditch Popper.js and custom JS listeners for native CSS anchors? Let's discuss in the comments! 👇

About the Author Samuel DIDIER-LAURENT is a Lead Frontend Developer with 7+ years of experience in digital agencies. Specialized in Vue.js/Nuxt and an advocate for accessible, high-performance CSS. Connect with me on 🔗 LinkedIn

CSS Only Navigation with Anchor Positioning — No JavaScript Needed

Samuel DIDIER-LAURENT — Mon, 19 Jan 2026 12:51:35 +0000

En tant que développeur frontend, on cherche souvent l'équilibre parfait entre performance, esthétique et maintenabilité. Récemment, je suis tombé sur une vidéo de Wes Bos relevant un défi de design lancé par Raul Dronca. Le challenge ? Une navigation ultra-fluide où un indicateur magnétique suit le curseur.

Historiquement, ce genre d'interaction nécessitait du JavaScript et des calculs de getBoundingClientRect(). En 2026, nous pouvons faire cela de manière native et déclarative grâce à l'API CSS Anchor Positioning.

1. Le Concept : L'Adieu aux calculs JavaScript

L'Anchor Positioning permet de lier la position d'un élément (l'indicateur ou "bubble") à un autre (le lien du menu), même s'ils ne partagent pas le même parent direct pour le positionnement.

La structure HTML

Nous gardons un DOM propre et accessible. Les bulles sont des éléments frères des liens, ce qui simplifie la gestion des animations.

<div class="nav-wrap">
  <nav id="main-nav">
    <div class="bubble bubble-active"></div>
    <div class="bubble bubble-hover"></div>

    <a href="#" class="nav-link active">Projets</a>
    <a href="#" class="nav-link">Articles</a>
    <a href="#" class="nav-link">Expérience</a>
    <a href="#" class="nav-link">Contact</a>
  </nav>
</div>

2. La Technique : `anchor-name` et `position-anchor`

C’est ici que réside la magie. Le processus se déroule en deux étapes :

Étape A : Identifier l'Ancre

On utilise la propriété anchor-name pour "nommer" l'élément que l'on veut suivre. Notez l'utilisation du double tiret --, obligatoire pour les noms d'ancres.

.nav-link.active {
  anchor-name: --active-link;
}

.nav-link:hover {
  anchor-name: --hover-link;
}

Étape B : Lier l'Indicateur

L'indicateur utilise position-anchor pour savoir quelle ancre regarder, puis les fonctions anchor() pour mapper ses dimensions sur celles de l'ancre.

.bubble-active {
  position: absolute;
  position-anchor: --active-link;

  /* L'indicateur épouse parfaitement les bords de l'ancre */
  top: anchor(top);
  left: anchor(left);
  right: anchor(right);
  bottom: anchor(bottom);

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

3. Le Rendu Visuel : Détails et Subtilités

Un bon développeur frontend se distingue par son souci du détail. Pour obtenir cet aspect "premium" vu dans la vidéo, nous jouons sur plusieurs tableaux :

Gradients Linéaires : Au lieu d'une simple couleur plate, on utilise des dégradés subtils pour simuler la lumière.
Box Shadows Inset : Pour donner un effet de profondeur (le bouton semble "creusé" dans la barre).
Glassmorphism : Une légère opacité combinée à un backdrop-filter (si nécessaire) pour laisser transparaître le fond.

Note technique : L'utilisation de isolation: isolate sur le parent <nav> est cruciale. Elle crée un nouveau contexte d'empilement, permettant aux bulles de se glisser derrière le texte (z-index: 1) tout en restant au-dessus du fond du menu.

4. Pourquoi cette approche est-elle supérieure ?

Critère	Méthode JS Classique	API Anchor Positioning
Performance	Calculs sur le thread principal	Géré nativement par le moteur de rendu
Complexité	Écouteurs d'événements + ResizeObserver	Quelques lignes de CSS pur
Fluidité	Risque de "jank" si le JS sature	Transitions CSS 60fps garanties

5. Conclusion

L'API Anchor Positioning n'est pas seulement un gadget ; c'est une preuve supplémentaire que le CSS devient de plus en plus puissant, réduisant notre dépendance aux scripts tiers pour l'UI.

En explorant ces techniques, on ne se contente pas de copier un design : on optimise l'expérience utilisateur tout en respectant les standards modernes du web.

Envie de voir le code en action ? Retrouvez ma démo interactive sur CodePen

Qu'en pensez-vous ? Est-ce que vous seriez prêts à utiliser cette nouvelle API (Discutons en commentaires)

Forem: Samuel DIDIER-LAURENT