What's the best way to add active class to links

Phoenix Forum Questions / Help
,
1

I have a link for “/store” and I want to highlight that link when the page is opened. What’s the best approach to solve this ?

<.link patch={~p"/stores"} class="text-sm font-bold leading-tight hover:no-underline text-gray-600">
  Stores
</.link>
2

This article should give you some pointers:

Basically, you need to set an assign when the LiveView mounts to indicate the current link and have some conditional logic in the template to set the right classes, e.g.

<.link patch={~p"/stores"} class={[
  "text-sm font-bold leading-tight hover:no-underline text-gray-600",
  if @current_link == :stores, do: "bg-gray-200", else: "bg-white"
>
  Stores
</.link>

There are many ways to organise this depending on your situation - the approach above will turn to spaghetti quite quickly as the number of possible links increases.