How to style/highlight parent item in UNavigationMenu when a child route is active?

[karagoezt]

Hi everyone!
I tried my best for about a day and couldnt figure out how to get the solution I wanted. I saw the perfect example how I want to make it work in the Nuxt UI Templates. The dashboard-template Sidebar when collapsed shows the parent as active, even when popover is active. When I activate popover on my UNavigationMenu, it looses to keep track of the active parent and shows different CSS Styles.

I'm using UNavigationMenu inside a sidebar (UDashboardSidebar) with custom styling provided via the :ui prop.

I have nested items with children (e.g. Settings -> Staff, Billing, etc.). When a child menu item is selected/active, the child correctly receives active state styling (data-active), but the parent menu trigger item retains its default inactive styles.

Here is an snippet of my navigation structure and setup:

import type { NavigationMenuItem } from '@nuxt/ui'

const navigation = computed<NavigationMenuItem[]>(() => [
  {
    label: 'Dashboard',
    icon: 'i-lucide-house',
    to: '/app',
    exact: true
  },
  {
    label: 'Inventory',
    icon: 'i-lucide-book-open',
    to: '/app/inventory',
    type: 'trigger',
    children: [
      {
        label: 'Menu Items',
        icon: 'i-lucide-utensils-crossed',
        to: '/app/inventory',
        exact: true
      },
      {
        label: 'Item Modifiers',
        icon: 'i-lucide-list-plus',
        to: '/app/inventory/modifiers'
      }
    ]
  },
  {
    label: 'Settings',
    icon: 'i-lucide-settings',
    to: '/app/settings',
    type: 'trigger',
    children: [
      {
        label: 'General',
        icon: 'i-lucide-user',
        to: '/app/settings',
        exact: true
      },
      {
        label: 'Staff',
        icon: 'i-lucide-users',
        to: '/app/settings/staff'
      }
    ]
  }
])

And my NavigationMenu

<UNavigationMenu
  :items="navigation"
  :collapsed="collapsed"
  tooltip
  popover
  orientation="vertical"
  color="neutral"
  :ui="{
    childList: 'p-1.5 space-y-1',
    list: collapsed ? 'flex flex-col items-center gap-1.5' : 'space-y-1.5',
    link: [
      'outline-none ring-0 border-0',
      'before:hidden after:hidden',
      'bg-white/5 border border-white/10 text-white/90',
      'hover:bg-white/10 hover:text-white transition-all',
      /* Target direct active item */
      'data-[active=true]:bg-primary-500 data-[active=true]:text-white',
      'h-11 rounded-lg',
      collapsed ? 'justify-center px-0 w-11 mx-auto' : 'px-3.5'
    ].join(' '),
    linkLeadingIcon: [
      'shrink-0 size-5 text-white/80 group-hover:text-white',
      'group-data-[active=true]:text-white'
    ].join(' ')
  }"
/>

Go easy on me, please. I am no CSS neither a Nuxt UI crack, gave my best but maybe the ui stylings are a bit messy.
Hope someone can help me out with that.

Thanks in advance everbody!
Best!

[latent-9]

Your navigation structure is fine. Two separate things are stopping the styles from landing, and the first one is why it looks like the component "loses track" of the parent.

1. data-[active=true] never matches

The attribute the component renders is valueless. From nuxt/ui's own render snapshot (test/components/__snapshots__/NavigationMenu.spec.ts.snap, the collapsed vertical case, on an item declared with active: true):

<button type="button" data-reka-collection-item="" data-active="" aria-current="page" data-slot="link" ...>

It is data-active="", not data-active="true". Tailwind compiles data-[active=true]: to [data-active="true"], which cannot match an empty value. So every one of these rules is dead:

data-[active=true]:bg-primary-500
data-[active=true]:text-white
group-data-[active=true]:text-white

The presence form is data-[active]: and group-data-[active]:. That alone explains why the child looked correct and the parent did not: you overrode link and linkLeadingIcon in :ui, but you left childLink alone, so children were still being styled by the built-in theme while your custom parent rules silently matched nothing.

2. In the expanded sidebar there is no data-active at all

Fixing the selector gets you the collapsed and popover case, but not the expanded one, because the expanded trigger is a different element.

src/runtime/components/NavigationMenu.vue:412:

v-bind="(props.orientation === 'vertical' && item.children?.length && !props.collapsed && item.type === 'trigger') ? {} : pickLinkProps(item)"

For a vertical type: 'trigger' item with children that is not collapsed, no link props are bound at all, and the rendered element becomes a Reka AccordionTrigger rather than a NavigationMenuLink. In the expanded snapshot that same active: true item renders as:

<button type="button" aria-expanded="false" data-state="closed" data-slot="link"
        class="... text-primary before:bg-elevated">

data-state, no data-active anywhere in that snapshot. The active state is still applied, but only through the theme's active variant in the class string, never as an attribute. That is also why the dashboard template only shows the parent highlighted while the sidebar is collapsed. It uses the same type: 'trigger' you do (app/layouts/default.vue, the Settings item, with defaultOpen: true), so it is not doing anything different from you here.

What to do instead

Drive it from the item rather than from a CSS attribute selector, which works identically in both modes. active is a real LinkProps field, documented in src/runtime/components/Link.vue:74 as "Force the link to be active independent of the current route", and every render branch honours it as active: active || item.active (lines 421, 458, 462). Those same lines merge item.class and item.ui.link last, after your :ui values, so per item classes win under tailwind-merge.

import type { NavigationMenuItem } from '@nuxt/ui'

const route = useRoute()

function isUnder(base: string) {
  return route.path === base || route.path.startsWith(`${base}/`)
}

function parent(base: string) {
  const on = isUnder(base)
  return {
    active: on,
    ui: {
      link: on ? 'bg-primary-500 text-white' : '',
      linkLeadingIcon: on ? 'text-white' : ''
    }
  }
}

const navigation = computed<NavigationMenuItem[]>(() => [
  { label: 'Dashboard', icon: 'i-lucide-house', to: '/app', exact: true },
  {
    label: 'Inventory',
    icon: 'i-lucide-book-open',
    to: '/app/inventory',
    type: 'trigger',
    defaultOpen: true,
    ...parent('/app/inventory'),
    children: [
      { label: 'Menu Items', icon: 'i-lucide-utensils-crossed', to: '/app/inventory', exact: true },
      { label: 'Item Modifiers', icon: 'i-lucide-list-plus', to: '/app/inventory/modifiers' }
    ]
  }
])

isUnder rather than a bare startsWith so that a sibling route like /app/inventory-archive does not light up the parent.

Then take the dead rules out of the shared :ui block and leave only the base styling there:

link: [
  'outline-none ring-0 border-0',
  'before:hidden after:hidden',
  'bg-white/5 border border-white/10 text-white/90',
  'hover:bg-white/10 hover:text-white transition-all',
  'h-11 rounded-lg',
  collapsed ? 'justify-center px-0 w-11 mx-auto' : 'px-3.5'
].join(' ')

If you would rather set it once for the whole app than per item, the other option is overriding the theme variant in app.config.ts under ui.navigationMenu.variants.active.true.link, which covers both element types for free since it is the same variant both branches call.

Read against nuxt/ui v4.

[karagoezt]

Thank you so much for this breakdown! You saved me hours of frustration.
Working flawlessly now!