UContentNavigation active link

nuxt4🖼️ui

This is my UContentNavigation element:

                <UContentNavigation :navigation="generatedItems" class="w-64 flex-1" :ui="{
                    link: 'text-white focus:before:bg-[linear-gradient(30deg,#339,#f0c)] hover:before:bg-transparent [&.router-link-exact-active]:before:!bg-[linear-gradient(30deg,#339,#f0c)]',
                    linkLeadingIcon: '!text-white group-hover:!text-[rgb(255,0,204)]',
                    linkTrailingIcon: 'text-white group-hover:text-[rgb(255,0,204)]',
                    linkTitle: 'text-white group-hover:text-[rgb(255,0,204)]',
                    list: 'w-50 bg-transparent border-0',
                }" />

                <UContentNavigation :navigation="generatedItems" class="w-64 flex-1" :ui="{
                    link: 'text-white focus:before:bg-[linear-gradient(30deg,#339,#f0c)] hover:before:bg-transparent [&.router-link-exact-active]:before:!bg-[linear-gradient(30deg,#339,#f0c)]',
                    linkLeadingIcon: '!text-white group-hover:!text-[rgb(255,0,204)]',
                    linkTrailingIcon: 'text-white group-hover:text-[rgb(255,0,204)]',
                    linkTitle: 'text-white group-hover:text-[rgb(255,0,204)]',
                    list: 'w-50 bg-transparent border-0',
                }" />

I am trying to change the background color to "

linear-gradient(30deg,#339,#f0c)

linear-gradient(30deg,#339,#f0c)

" of the active page in the ContentNavigation list.

I've already found "

focus:before:

focus:before:

" class prefix but it only works whenever the link is really focused and it loses the background color if the user clicks elsewhere.

I've also tried

[&.router-link-exact-active]:before:

[&.router-link-exact-active]:before:

and

aria-[current=page]:before:

aria-[current=page]:before:

But they didn't work also

The docs are on https://ui.nuxt.com/docs/components/content-navigation

Nuxt UI

Vue ContentNavigation Component - Nuxt UI

An accordion-style navigation component for organizing page links.

UContentNavigation active link

nuxt4🖼️ui

This is my UContentNavigation element:

                <UContentNavigation :navigation="generatedItems" class="w-64 flex-1" :ui="{
                    link: 'text-white focus:before:bg-[linear-gradient(30deg,#339,#f0c)] hover:before:bg-transparent [&.router-link-exact-active]:before:!bg-[linear-gradient(30deg,#339,#f0c)]',
                    linkLeadingIcon: '!text-white group-hover:!text-[rgb(255,0,204)]',
                    linkTrailingIcon: 'text-white group-hover:text-[rgb(255,0,204)]',
                    linkTitle: 'text-white group-hover:text-[rgb(255,0,204)]',
                    list: 'w-50 bg-transparent border-0',
                }" />

                <UContentNavigation :navigation="generatedItems" class="w-64 flex-1" :ui="{
                    link: 'text-white focus:before:bg-[linear-gradient(30deg,#339,#f0c)] hover:before:bg-transparent [&.router-link-exact-active]:before:!bg-[linear-gradient(30deg,#339,#f0c)]',
                    linkLeadingIcon: '!text-white group-hover:!text-[rgb(255,0,204)]',
                    linkTrailingIcon: 'text-white group-hover:text-[rgb(255,0,204)]',
                    linkTitle: 'text-white group-hover:text-[rgb(255,0,204)]',
                    list: 'w-50 bg-transparent border-0',
                }" />

I am trying to change the background color to "

linear-gradient(30deg,#339,#f0c)

linear-gradient(30deg,#339,#f0c)

" of the active page in the ContentNavigation list.

I've already found "

focus:before:

focus:before:

" class prefix but it only works whenever the link is really focused and it loses the background color if the user clicks elsewhere.

I've also tried

[&.router-link-exact-active]:before:

[&.router-link-exact-active]:before:

and

aria-[current=page]:before:

aria-[current=page]:before:

But they didn't work also

The docs are on https://ui.nuxt.com/docs/components/content-navigation

Nuxt UI

Vue ContentNavigation Component - Nuxt UI

An accordion-style navigation component for organizing page links.

UContentNavigation active link

UContentNavigation active link

Similar Threads