How can I style the active link in my navigation bar?

[nandofer11]

I am learning to use headlessui, I have created a MyLink component and use it in my NavBar component, but I want to change the style to the active link when the page changes, I have the following code that I need to add or modify please.

My navigation does work between pages, but the Home link is always active with the styles, but the aria-current never changes, it is always on the home button and the styles do not apply to the other links, how do I do?

import MyLink from './mylink'

const navigation = [
    { name: 'Inicio', href: '/', current: true },
    { name: 'Empresa', href: 'empresa', current: false },
    { name: 'Productos', href: 'productos', current: false },
    { name: 'Contacto', href: 'contacto', current: false },
]

<div className="hidden sm:block sm:ml-6">
                                    <div className="flex space-x-4">
                                        <Menu>
                                            {navigation.map((item) => (
                                                <Menu.Item>

                                                    <MyLink key={item.name}
                                                        href={item.href}
                                                        className={classNames(
                                                            item.current ? 'bg-blue-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
                                                            'px-3 py-2 rounded-md text-sm font-medium'
                                                        )}
                                                        aria-current={item.current ? 'page' : undefined}>{item.name}
                                                    </MyLink>

                                                </Menu.Item>
                                            ))}
                                        </Menu>
                                    </div>
                                </div>

[homiecoder]

Hey, know this post is super old, found it on my searches to solve the same problem. I have learned how to do what your asking, did you already figure it out?
Hope you did, if not hit me up, I'll help where I can!
Peace, BJ

[alexnberra]

What's the fix to this? I'm trying to implement with Composition API and Inertia JS.

[homiecoder]

Hey @alexnberra!
Sorry for my delay, actually caught covid, what a monster.
I am starting to feel better.
Wanted to touch bases, let u know I will respond and help you with this by end of week.
Thanks for your patience.

[alexnberra]

Thank hope you’re feeling better. Interested to know preferred way to solve this problem approach tailwinds default tailwindui vue3 code when render v-for arrays with a true false value.Alex ***@***.***(617)-840-5630On Jan 23, 2023, at 12:20 PM, BJ ***@***.***> wrote: Hey @alexnberra! Sorry for my delay, actually caught covid, what a monster. I am starting to feel better. Wanted to touch bases, let u know I will respond and help you with this by end of week. Thanks for your patience. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>