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
One idea would be to wrap it with your own helper like so:
<%= my_link "Home", to: Routes.page_path(@conn, :index) %>
3
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.
2
Last Post!
wevtimoteo
Popular in Questions
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
lets say i have a sample like
a = 20; b = 10;
if (a > b) do
{:ok, "a"}
end
if (a < b) do
{:ok, b}
end
if (a == b) do
{:ok, "equa...
New
In templates/appointment/index.html.eex:
<%= for appointment <- @appointments do %>
<tr>
<td><%= appoi...
New
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
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
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
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
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine)
This is a plugin that adds support for Elixir to JetBrains IntelliJ...
New
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
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
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New
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
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
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex









