Nuxt•4w ago

Change active background color of NuxtUI - UNavigationMenu

How can I change the background color of link when is activated. In case and by default, it's bg-elevated. For instance I need to show bg-accented, when the link or sublink is activated.

3 Replies

kapa.ai•4w ago

Hi @Alaki. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the active background color of a link in NuxtUI's UNavigationMenu, you need to customize the component's theme, specifically the class applied to active links. By default, the active style uses bg-elevated, but you want to use bg-accented instead. The NuxtUI theme system allows you to override or extend the default classes via your app configuration. For UNavigationMenu, the active link style is controlled by the theme's class.link property for the active state. You can override this in your app.config.ts file. Here’s how you can do it:

// app.config.ts
export default defineAppConfig({
  ui: {
    navigationMenu: {
      variants: {
        // Override the active state for the pill variant
        pill: {
          active: {
            class: {
              link: 'bg-accented text-primary', // Add your desired classes here
            }
          }
        }
      }
    }
  }
})

// app.config.ts
export default defineAppConfig({
  ui: {
    navigationMenu: {
      variants: {
        // Override the active state for the pill variant
        pill: {
          active: {
            class: {
              link: 'bg-accented text-primary', // Add your desired classes here
            }
          }
        }
      }
    }
  }
})

This will apply bg-accented as the background color for active links in the pill variant. Adjust the variant or add more specificity as needed for your use case. If you want to target sublinks or other variants, you can further customize the theme using the same approach, referencing the structure shown in the theme documentation for UNavigationMenu see Theme section. Note: If you are using a different variant (like link), adjust the variant key accordingly. The theme system is highly flexible and allows you to target specific states and variants as needed. For more details and examples, refer to the official documentation: UNavigationMenu Theme. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

AlakiOP•4w ago

Instead of Varients, I add compoundVarients like this:

        navigationMenu: {
            compoundVariants: [
                {
                    variant: 'pill',
                    active: true,
                    highlight: false,
                    class: {
                        link: 'before:bg-accented'
                    }
                },
                {
                    variant: 'pill',
                    active: true,
                    highlight: true,
                    disabled: false,
                    class: {
                        link: [
                            'hover:before:bg-accented/50',
                            'before:transition-colors'
                        ]
                    }
                }
            ]
        }

and I action My problem Is Solved

Gaming

Programming

Change active background color of NuxtUI - UNavigationMenu

Did you find this page helpful?