zizheng

zizheng

Set active Bootstrap navbar item with Phoenix

Hi all, I’m using Phoenix with Bootstrap and I’m having some trouble figuring out the best way to set the active navbar item.

In Bootstrap, adding the "active" class to a nav item sets it as the current nav item. My goal is to do something like this in my Phoenix templates:

<li class="nav-item <%= nav_item_state(:foos) %>">
  <%= link "Foos", to: Routes.foo_path(@conn, :index), class: "nav-link" %>
</li>

<li class="nav-item <%= nav_item_state(:bars) %>">
  <%= link "Bars", to: Routes.bar_path(@conn, :index), class: "nav-link" %>
</li>

and something like this in my controllers:

# I want to avoid having to pass `:foos`/`:bars` as an assign every time I call `render`
defmodule MyAppWeb.FooController do
  ...
  def active_nav_item, do: :foos
end

defmodule MyAppWeb.BarController do
  ...
  def active_nav_item, do: :bars
end

I want nav_item_state(:foos) to return "active" when the current controller is FooController, and to return "" otherwise.

I think nav_item_state should be defined in my LayoutView module, but not really sure how to piece things together. Appreciate any suggestions!

Most Liked

ehayun

ehayun

You can create a function in your view file like this

def active_menu(conn, item) do
    if conn.request_path =~ Atom.to_string(item), do: "active", else: ""
  end

and in your html.eex file do like this

<li class=" <%= active_menu(@conn, :foo) %>"> <a href="/foo">foo</a></li>
<li class=" <%= active_menu(@conn, :bar) %>"> <a href="/bar">bar</a></li>
zizheng

zizheng

Thanks, I ended up creating a custom plug that puts the current active nav item in the conn:

defmodule MyAppWeb.FooController do
  plug MyAppWeb.Plugs.ActiveNavItem, :foos
  ...
end

and added a function in my LayoutView that queries the conn for this information.

Where Next?

Popular in Questions Top

Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
chensan
I have a User schema with a :from_id field set to type :string: defmodule TweetBot.Repo.Migrations.CreateUsers do use Ecto.Migration ...
New

Other popular topics Top

albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

We're in Beta

About us Mission Statement