N
Nuxt•21h ago
Angh0r

[NuxtUI] NavigationMenu - How to style active state

I've got small side menu and for this on default active state styling dosn't work for me. I've tried to style active state trough :ui prop but can't find proper way to change for example bg color. I know it's before element. I've tried following object formats: active:link, active:true:link, then both of those with variants: around. Nothing seems to work. Wrong approach or a template bug in NuxtUI?
5 Replies
kapa.ai
kapa.ai•21h ago
Hi @Angh0r. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To style the active state of a NuxtUI NavigationMenu item—such as changing the background color—you should use the :ui prop with the correct structure. The active state styling is controlled by the active variant in the theme configuration, and for the background color, you typically need to target the link class, which may use a before pseudo-element for the background. From the official theme configuration, the active state for child links is styled like this: 
active: {
  true: {
    childLink: 'bg-(--ui-bg-elevated) text-(--ui-text-highlighted)',
    childLinkIcon: 'text-(--ui-text)'
  }
}
active: {
  true: {
    childLink: 'bg-(--ui-bg-elevated) text-(--ui-text-highlighted)',
    childLinkIcon: 'text-(--ui-text)'
  }
}
For top-level links, the active state is controlled by compound variants, for example: 
{
  color: 'primary',
  variant: 'pill',
  active: true,
  class: {
    link: 'text-(--ui-primary)',
    linkLeadingIcon: 'text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)'
  }
},
{
  variant: 'pill',
  active: true,
  highlight: false,
  class: {
    link: 'before:bg-(--ui-bg-elevated)'
  }
},
{
  variant: 'pill',
  active: true,
  highlight: true,
  class: {
    link: [
      'hover:before:bg-(--ui-bg-elevated)/50',
      'before:transition-colors'
    ]
  }
}
{
  color: 'primary',
  variant: 'pill',
  active: true,
  class: {
    link: 'text-(--ui-primary)',
    linkLeadingIcon: 'text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)'
  }
},
{
  variant: 'pill',
  active: true,
  highlight: false,
  class: {
    link: 'before:bg-(--ui-bg-elevated)'
  }
},
{
  variant: 'pill',
  active: true,
  highlight: true,
  class: {
    link: [
      'hover:before:bg-(--ui-bg-elevated)/50',
      'before:transition-colors'
    ]
  }
}
How to override the active state: You should use the :ui prop and provide an object that matches the variant and state you want to override. For example, to change the background color of the active link in a vertical side menu, you might do: 
<UNavigationMenu
  :items="items"
  :ui="{
    active: {
      true: {
        link: 'before:bg-red-500' // or your custom class
      }
    }
  }"
/>
<UNavigationMenu
  :items="items"
  :ui="{
    active: {
      true: {
        link: 'before:bg-red-500' // or your custom class
      }
    }
  }"
/>
Or, if you want to target a specific variant or orientation, you can use a more specific structure: 
<UNavigationMenu
  :items="items"
  :ui="{
    color: {
      neutral: {
        variant: {
          pill: {
            active: {
              true: {
                link: 'before:bg-red-500'
              }
            }
          }
        }
      }
    }
  }"
/>
<UNavigationMenu
  :items="items"
  :ui="{
    color: {
      neutral: {
        variant: {
          pill: {
            active: {
              true: {
                link: 'before:bg-red-500'
              }
            }
          }
        }
      }
    }
  }"
/>
Important:
- The before:bg-* utility is used because the background is applied to a before pseudo-element. - Make sure your custom class is valid and available in your Tailwind config if you use Tailwind classes. If your overrides are not working, double-check the structure of your :ui object and ensure it matches the theme's expected shape. The knowledge sources do not mention a template bug, so it's likely a matter of matching the correct structure for the :ui prop and the theme's compound variants. For more details and examples, see the NavigationMenu Theme section. If you still have issues, please provide your exact :ui prop structure and the menu configuration for further troubleshooting. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•21h ago
<@439284866610233345> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Angh0r
Angh0rOP•20h ago
@kapa.ai non of above works. Background color stays the same
kapa.ai
kapa.ai•20h ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry you're having trouble overriding the active state background color in NuxtUI's NavigationMenu. Based on the official documentation, the active state background for the pill variant is indeed set using the before pseudo-element, and the class is typically before:bg-(--ui-bg-elevated) or similar. The theme configuration shows that for active pill variants, the class is applied like this: 
{
  variant: 'pill',
  active: true,
  highlight: false,
  class: {
    link: 'before:bg-(--ui-bg-elevated)'
  }
}
{
  variant: 'pill',
  active: true,
  highlight: false,
  class: {
    link: 'before:bg-(--ui-bg-elevated)'
  }
}
However, the documentation does not provide a concrete example of overriding this via the :ui prop at the component level. It only shows the internal theme structure and not how to extend or override it from the outside. There is no explicit information in the knowledge sources about the exact syntax or method to override the before:bg-* class for the active state using the :ui prop in your template. If the approaches you've tried (such as using :ui="{ active: { true: { link: 'before:bg-red-500' } } }") do not work, the knowledge sources do not provide further guidance or troubleshooting steps for this specific scenario. It may be a limitation of the current version or require a different approach not covered in the documentation. If you need more advanced customization, you might need to look into extending the theme in your Nuxt app's configuration, but again, the knowledge sources do not provide explicit instructions for this. Summary:
The knowledge sources do not contain enough information to provide a definitive solution for overriding the active background color of NavigationMenu items via the :ui prop. If your attempts are not working, it may be due to a limitation or missing documentation in NuxtUI at this time.
NavigationMenu Theme ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•20h ago
<@439284866610233345> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?