diff --git a/assets/navbar.js b/assets/navbar.js
new file mode 100644
index 0000000..d33c056
--- /dev/null
+++ b/assets/navbar.js
@@ -0,0 +1,28 @@
+;(function () {
+  var navbarItems = document.querySelectorAll('.dcl.navbar .dcl.navbar-menu .ui.menu > div.item')
+  navbarItems.forEach((menuItem) => {
+    menuItem.addEventListener('mouseenter', function (event) {
+      var submenu = event.target.querySelector('.item.submenu')
+      if (submenu) {
+        submenu.classList.add('active')
+      }
+    })
+    menuItem.addEventListener('mouseleave', function (event) {
+      var submenu = event.target.querySelector('.item.submenu')
+      if (submenu && submenu.classList.contains('active')) {
+        submenu.classList.remove('active')
+      }
+    })
+    menuItem.querySelectorAll('a.item').forEach((link) => {
+      var parent = menuItem.querySelector('a.item')
+      link.addEventListener('click', function (event) {
+        if (window.analytics) {
+          window.analytics.track('Clicked on navbar', {
+            section: parent.textContent.toLowerCase(),
+            submenu: parent.textContent !== event.target.textContent ? event.target.textContent.toLowerCase() : undefined,
+          })
+        }
+      })
+    })
+  })
+})()
diff --git a/layouts/partials/docs/navbar.html b/layouts/partials/docs/navbar.html
index 6e86b2b..6c5b400 100644
--- a/layouts/partials/docs/navbar.html
+++ b/layouts/partials/docs/navbar.html
@@ -69,3 +69,10 @@
     </div>
   </div>
 </div>
+
+<!-- Restore menu position as soon as possible to avoid flickering -->
+{{ $script := resources.Get "navbar.js" | resources.Minify }} {{ with $script.Content }}
+<script>
+  {{ . | safeJS }}
+</script>
+{{ end }}