Disclosure.Button's "as={NavLink}" isn't styling when active

Question

I have 2 menu's on a React project, both of which use NavLink to show whether it is active or not.

The normal one works, but the mobile one is build with the HeadlessUI Disclosure.Button...

So I have:

<Disclosure.Button
  as={NavLink}
  to='/'
  className={({ isActive }) => isActive
    ? "bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6"
    : "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6"
  }
>
  My Events
</Disclosure.Button>

And the isActive boolean in this one just doesn't work.

I'm assuming that the className I use do not affect the NavLink, but only affects the Button? But I haven't a clue.

The issue isn't with the Router or anything, because the main manu up top works:

<NavLink
  to="/"
  className={({ isActive }) => isActive
    ? "border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
  }
>
  My Events
</NavLink>

Your code seems to work as I'd expect. Here's a basic [codesandbox](https://codesandbox.io/s/disclosure-buttons-as-navlink-isnt-styling-when-active-1wc7vs) of your code. I added an `"active"` class and CSS to test, so maybe there's an issue with your CSS. What exactly is the issue you are seeing? — Drew Reese, Jul 19 '22 at 16:15
@DrewReese it adds the `"active"` class by default, w/o needing to use the `className` as a function, try adding another class. It's possible the `Disclosue.Button` isn't changing the `className` behavior even with `as`. — Nathan, Jul 19 '22 at 16:35
@Nathan Oh, you're right... I had thought if you provided your own classes that it overrode the default `"active"` class. It looks like I might not be mistaken though. I updated the code to log out the `isActive` value in the `className` callback function and it's undefined. To be frank, I don't see the point in using this "toggle button" as a link. — Drew Reese, Jul 19 '22 at 16:44

score 4 · Accepted Answer · answered Jul 23 '22 at 15:51

I solved it by chucking the whole Disclosure.Button thing out the window.

The only reason I wanted to use it, was since it was used by the Tailwind CSS people, who uses it to close the Disclosure panel after you clicked the button.

But if you wrap the whole inside of the Disclosure.Panel in:

{({ close }) => (
    ***Your code here***
)}

Then you can simply add an onClick handler on the NavLink which calls the close() function, which will then close the Disclosure panel... i.e.:

<NavLink
            to='/'
            className={({ isActive }) =>
              isActive ? "bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6" : "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6"
            }
            onClick={() => close()}
            >
            My Events
</NavLink>

Disclosure.Button's "as={NavLink}" isn't styling when active

1 Answers1