Nuxt 3/Nuxt UI UNavigationMenu won’t highlight hash‐based section on page reload

Question

I’m using the Nuxt UI <UNavigationMenu> component in my Nuxt 3 app to render a header nav that scrolls to sections via hash links within my pages/index.vue (#about, #products, #news, etc.). Clicking works fine, and the correct menu item highlights and scrolls to that section.

However, if I reload the page while viewing, for example,/#products or any other section like #news, #about, etc., the page scrolls to the respective products/news/about section, but the navigation menu always highlights “Home” (the first item) instead of Products/News/About.

How can I get <UNavigationMenu> to pick up the current route.hash on load so that the correct item is active?

Following is my components/AppHeader.vue:

<template>
  <header class="bg-white sticky top-0 z-50">
    <nav class="lg:flex flex-1 justify-center">
      <UNavigationMenu
        v-model="activeSection"
        :items="navItems"
        class="space-x-2"
        highlight
        highlight-color="primary"
      >
        <template #item="{ item, active }">
          <ULink
            as-child
            :to="{ path: '', hash: `#${item.to}` }"
            exact-hash
            class="px-4 py-2 rounded-md transition"
            aria-label="Go to {{ item.label }}"
          >
            <span class="inline-flex items-center">
              <UIcon v-if="item.icon" :name="item.icon" class="size-5 mr-2" />
              <span>{{ item.label }}</span>
            </span>
          </ULink>
        </template>
      </UNavigationMenu>
    </nav>
  </header>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { useRoute } from "vue-router";
import type { NavigationMenuItem } from "@nuxt/ui";

const route = useRoute();

// Define your nav data (to = hash without leading '#')
const navItems = ref<NavigationMenuItem[]>([
  { label: "Home", icon: "i-lucide-home", value: "", to: "" },
  {
    label: "About Us",
    icon: "i-lucide-user-circle",
    value: "about",
    to: "about",
  },
  {
    label: "Products",
    icon: "i-lucide-package",
    value: "products",
    to: "products",
  },
  {
    label: "Technologies",
    icon: "i-lucide-cpu",
    value: "technologies",
    to: "technologies",
  },
  {
    label: "News",
    icon: "i-lucide-newspaper",
    value: "news",
    to: "news",
  },
]);
</script>

Following is the documentation I am refeering to: API: https://ui.nuxt.com/components/navigation-menu

I have created the reproduction within the CodeSandBox: https://codesandbox.io/p/devbox/sharp-hill-fx62n5

Clark · Accepted Answer · 2025-06-30 08:22:03Z

1

Hei, simply by following exactly guide, you already has the active class working:

https://codesandbox.io/p/devbox/upbeat-glitter-7j2lzn

The customise code that you added possibly mess up the reactive. I would suggest to simplify it as the guideline unless you want to add custom logic there.

answered Jun 30 at 8:22

Clark

988 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

BATMAN_2008 Jun 30 at 11:49

Thanks a lot for the response, I forked your repo and added some content to pages/index.vue and removed my onMounted and watch functions from components/AppHeader.vue but still I am seeing the issue. Following is the link to forked CodeSandBox. I have also added the screen recording in the GitHub issues question: github.com/nuxt/ui/issues/4416#issuecomment-3018034412

Clark Jun 30 at 19:35

No it seems to work fine for me, I added your code back to index.vue, click navigation. It goes to section and hight line without any problem. Check my sandbox again, I am not sure why your is not working. maybe clean cache or do it in the local to see if the issue still persitance

BATMAN_2008 Jul 1 at 7:06

Thanks a lot for checking again. I started with local, where I saw the issue, so I created it in CodeSandBox, thinking it's a bug. I also tried various browsers, such as Firefox, Safari, Chrome, and in Incognito mode, to avoid any extension causing the issue. I am seeing the same problem in all browsers, which is why I am a bit confused as to why it is happening. Also, I observed that when I open it within a CodeSandbox small browser, it works, but when I open it in a new tab, it causes the issue.

Clark Jul 1 at 18:33

Can you give me the repo so I can test it in my local, that is the weird issue. It is hard to tell without check it

Clark Jul 2 at 13:50

Nice, glad they found it out.

|

Collectives™ on Stack Overflow

Nuxt 3/Nuxt UI UNavigationMenu won’t highlight hash‐based section on page reload

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related