sensitive-blue

Styling parent of <Link> with active state

I'd like to style a navigation that's structured like this:

<ul>
  <li className="active">
    <Link to="/foo">...</Link>
  </li>
</ul>

<ul>
  <li className="active">
    <Link to="/foo">...</Link>
  </li>
</ul>

How do i elegantly control the className? I was looking at comparing /foo withuseLocation().pathname but it's typed as string so maybe there's a better way.

4 Replies

sensitive-blueOP•14mo ago

AFAIK the HTML spec does not allow changing the hierarchy to have ul, then a (Link), then li.

equal-aqua•14mo ago

Have a look at this example I created for you https://stackblitz.com/edit/tanstack-router-n7bgpb?file=src%2Froutes%2Fabout.tsx,src%2FListItemLink.tsx&preset=node

StackBlitz

Router Quickstart File Based Example (forked) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

equal-aqua•14mo ago

checkout the /about page

sensitive-blueOP•14mo ago

@Manuel Schiller thank you! createLink is what i was missing

Gaming

Programming

Styling parent of <Link> with active state

Did you find this page helpful?