kyde

kyde

How to get the active route and update classes in a navigation bar?

I have a navigation bar in my web app. I need to update the active route link with css classes to show that it’s the active route.

My current approach is as follows:
In my NavigationView I have a helper function like this:


defmodule MyAppWeb.NavigationView do
  use MyAppWeb, :view
  
  def get_link_classes(conn, link) do
    classes = ["common-link-class"]
    
    classes = 
    if get_current_path(conn) == link do
      ["active-link-class" | classes]
    else
      classes
    end
    
    Enum.join(classes, " ")
  end
  
  defp get_current_path(conn) do
    conn
    |> Map.get(:request_path)
    |> String.split(~r/\//)
    |> Enum.at(1)
  end
end

The in my markup I use the helper function as follows:

<ul>
  <li>
    <%= link "Home", to: Routes.page_path(@conn, :index), class: get_link_classes(@conn, "") %>
  </li>
  <li>
    <%= link "Blog", to: Routes.blog_path(@conn, :index), class: get_link_classes(@conn, "blog")%>
  </li>
  <li>
    <%= link "About Me", to: Routes.blog_path(@conn, :index), class: get_link_classes(@conn, "about") %>
  </li>
</ul>

Is there a better approach to get the active link?

Most Liked

stefanchrobot

stefanchrobot

One idea would be to wrap it with your own helper like so:

<%= my_link "Home", to: Routes.page_path(@conn, :index) %>
sfusato

sfusato

I’m personally using phoenix_active_link package. Has a bunch of options like inclusivity, exclusivity, exact match, regex options etc. It works for simple cases, but also for more complex scenarios, like a main menu with a sub-menu where you still want to show which item is active from the main menu.

Last Post!

wevtimoteo

wevtimoteo

I know this is old, but I wanted to share a straightforward approach on defining the classes using an alternative syntax:

<.link
  href={~p"/stores/#{@store}/products"}
  class={["tab", @active == :products && "tab-active"]}
>
  Products
</.link>

I’ve explained it in details in this blog post

Where Next?

Popular in Questions Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a &gt; b) do {:ok, "a"} end if (a &lt; b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
Lily
In templates/appointment/index.html.eex: &lt;%= for appointment &lt;- @appointments do %&gt; &lt;tr&gt; &lt;td&gt;&lt;%= appoi...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Other popular topics Top

KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36654 110
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New

We're in Beta

About us Mission Statement