Nuxt•7mo ago

nuxt ui navbar highlight top level pages as active when their children are active?

So I'm using the nuxt ui navigation menu and i have a page say at "/store' as the top level of that navigation menu and another page called "/store/garden" Ideally when i'm on the /store/garden page i want the top level parent in navigation menu to still be highlighted as active and not only when im on the /store page. is there a way to achieve this behaviour?

14 Replies

kapa.ai•7mo ago

Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The Nuxt UI Navigation Menu allows you to control which items are marked as active by setting the active property on each item. To achieve the behavior where a top-level parent (e.g., "/store") is highlighted as active when any of its children (e.g., "/store/garden") are active, you need to set the active property on the parent item based on the current route. The official documentation demonstrates this pattern by using a computed property that checks if the current route matches the parent or any of its children. For example:

import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()

const items = computed(() => [
  {
    label: 'Store',
    to: '/store',
    active: route.path.startsWith('/store'), // This will be true for both /store and /store/garden
    children: [
      {
        label: 'Garden',
        to: '/store/garden',
        active: route.path === '/store/garden'
      }
    ]
  }
])

import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()

const items = computed(() => [
  {
    label: 'Store',
    to: '/store',
    active: route.path.startsWith('/store'), // This will be true for both /store and /store/garden
    children: [
      {
        label: 'Garden',
        to: '/store/garden',
        active: route.path === '/store/garden'
      }
    ]
  }
])

This way, when you are on /store/garden, the parent /store item will also be highlighted as active because route.path.startsWith('/store') will be true for both /store and /store/garden routes. You can then pass this items array to your <UNavigationMenu :items="items" /> component. This approach is shown in the Nuxt UI Header and Navigation Menu documentation, where the active property is set based on the current route using startsWith or similar logic to match parent and child routes Within app.vue. If you want more granular control, you can further customize the logic to match your routing structure. Summary:
Yes, you can highlight top-level navigation items as active when their children are active by setting the active property on the parent item based on the current route, typically using route.path.startsWith('/parent') logic in your computed items array Within app.vue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•7mo ago

@kapa.ai oh sweet thanks for that

kapa.ai•7mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're welcome! If you have any more questions about Nuxt UI or need help with navigation menus or active state logic, feel free to ask. Happy coding! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•7mo ago

@kapa.ai can i do something similar with a ULink?

kapa.ai•7mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can achieve similar behavior with a ULink by using its props to control the active state. The ULink component provides an active-class and inactive-class prop, and you can use the raw prop to apply your own logic for when a link should be considered active. For example, you can set the active-class when the current route matches your criteria (such as the route starting with /store):

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()
const isStoreActive = computed(() => route.path.startsWith('/store'))
</script>

<template>
  <ULink
    to="/store"
    raw
    :class="{ 'font-bold': isStoreActive, 'text-muted': !isStoreActive }"
  >
    Store
  </ULink>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()
const isStoreActive = computed(() => route.path.startsWith('/store'))
</script>

<template>
  <ULink
    to="/store"
    raw
    :class="{ 'font-bold': isStoreActive, 'text-muted': !isStoreActive }"
  >
    Store
  </ULink>
</template>

This way, the ULink will be styled as active whenever the current route starts with /store, including /store/garden and other subpages. You can also use the active-class and inactive-class props directly if you prefer ULink Style.

You can override this behavior by using the raw prop and provide your own styles using class, active-class and inactive-class ULink Style.

If you need more advanced matching (e.g., exact query or hash), ULink also supports exact, exact-query, and exact-hash props. So yes, you have full control over the active state styling with ULink! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•7mo ago

@kapa.ai how do i add a transition so that colors changing are smooth globally on ULinks>

kapa.ai•7mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To add a smooth color transition globally to ULink components in Nuxt UI, you can use the transition-colors utility class. According to the Nuxt UI documentation, ULink and other UI Pro components use this class to enable smooth transitions for color changes, especially on hover or active states. If you want to ensure this behavior is applied globally, you can enable transitions in your Nuxt UI Pro configuration (this is enabled by default):

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  ui: {
    theme: {
      transitions: true // This adds the `transition-colors` class globally
    }
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  ui: {
    theme: {
      transitions: true // This adds the `transition-colors` class globally
    }
  }
})

With this setting, all components—including ULink—will have smooth color transitions when their state changes (e.g., on hover or when active). If you want to disable this, you can set transitions: false theme.transitions. Summary:
Enable or ensure theme.transitions: true in your Nuxt UI Pro config to apply smooth color transitions globally to ULink and other components theme.transitions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•7mo ago

@kapa.ai and do i need to change my items list to a computed to ensure it recalculates on route change right?

kapa.ai•7mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you should use a computed property for your items list if you want the active state to update automatically when the route changes. This is the recommended approach in the Nuxt UI documentation, as it ensures that the active property on your navigation items is recalculated reactively whenever the route changes. This way, your navigation menu will always reflect the correct active state based on the current route Within app.vue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

nuxt ui navbar highlight top level pages as active when their children are active?

Did you find this page helpful?