Nuxt•4mo ago

Navigation Active class

Hello, I want to add the active-link class on NuxtLink in case i am navigate throw child of the parents as example i f i have reservations button after click on it it will be active and show all reservations but when i click on one of reservations the button will be no longer active but i want it to be active by other word the reservations button should be active in case of reservations url and reservations/slug

5 Replies

kapa.ai•4mo ago

Hi @Neamix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add an active class to a NuxtLink that remains active when navigating through child routes, you can use the exact-active-class prop along with a more flexible path matching approach. Here's how you can achieve this: 1. Use the exact-active-class prop on your NuxtLink component. 2. Implement a custom method to check if the current route matches the desired path. Here's an example of how you can implement this:

<template>
  <NuxtLink 
    to="/reservations" 
    :class="{ 'active-link': isReservationRoute }"
  >
    Reservations
  </NuxtLink>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const isReservationRoute = computed(() => {
  return route.path.startsWith('/reservations')
})
</script>

<template>
  <NuxtLink 
    to="/reservations" 
    :class="{ 'active-link': isReservationRoute }"
  >
    Reservations
  </NuxtLink>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const isReservationRoute = computed(() => {
  return route.path.startsWith('/reservations')
})
</script>

In this example: 1. We use a computed property isReservationRoute to check if the current route path starts with '/reservations'. 2. We apply the 'active-link' class conditionally based on the isReservationRoute computed property. This approach will keep the "Reservations" link active for both '/reservations' and '/reservations/[slug]' routes. For more information on NuxtLink and its props, you can refer to the NuxtLink documentation. If you want to customize the active class name or behavior further, you can also use the defineNuxtLink utility to set default options for all NuxtLinks in your application. You can find more details about this in the defineNuxtLink documentation. Remember that the exact implementation might vary depending on your specific routing structure and requirements. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

NeamixOP•4mo ago

@kapa.ai my routes started with /dashboard/reservations

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for providing that additional information about your route structure. To adjust the active class for your specific route that starts with /dashboard/reservations, you can modify the example I provided earlier. Here's how you can update it:

<template>
  <NuxtLink 
    to="/dashboard/reservations" 
    :class="{ 'active-link': isReservationRoute }"
  >
    Reservations
  </NuxtLink>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const isReservationRoute = computed(() => {
  return route.path.startsWith('/dashboard/reservations')
})
</script>

<template>
  <NuxtLink 
    to="/dashboard/reservations" 
    :class="{ 'active-link': isReservationRoute }"
  >
    Reservations
  </NuxtLink>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const isReservationRoute = computed(() => {
  return route.path.startsWith('/dashboard/reservations')
})
</script>

In this updated version: 1. We've changed the to prop of the NuxtLink to /dashboard/reservations. 2. The isReservationRoute computed property now checks if the current route path starts with /dashboard/reservations. This approach will keep the "Reservations" link active for both /dashboard/reservations and any child routes like /dashboard/reservations/[slug]. For more information on using NuxtLink and its properties, you can refer to the NuxtLink documentation. If you need to apply this behavior to multiple links or want to customize it further, you might consider creating a custom component or using the defineNuxtLink utility to set default options. You can find more details about defineNuxtLink in the defineNuxtLink documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

Gaming

Programming

Navigation Active class

Did you find this page helpful?