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 <%=…

Hi @zizheng ! A very simplistic version of what I’m using in my applications is something like this: def nav_link(conn, text, opts) do to = opts[:to] case Map.fetch(conn, :request_path) do {:ok, ^to} -> link(text, class: "#{opts[:class]} active") _ -> …

Thanks for the reply @thiagomajesk ! I wonder how this part works: case Map.fetch(conn, :request_path) do {:ok, ^to} -> Doesn’t this mean the current request path needs to match the nav link target path for the item to be active…? Also, I kinda want to avoid having to pass @resource as an assig…

Have you tried using nav-pills? I use them and ccs customize it. Bootstrap handles the active class. Also see th “Using Data Attributes” section at the bottom which might also help. [image] Navs Documentation and examples for how to use Bootstrap’s included navigation components. …

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=" <%= acti…

[image] zizheng: Doesn’t this mean the current request path needs to match the nav link target path for the item to be active…? Yes, like I said this is roughly what I’m using in my application. You certainly will have to tweak for your own needs. Perhaps matching only parts of the path, usin…

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.

Elixir Programming Language Forum

Set active Bootstrap navbar item with Phoenix

Questions & Help Questions

trechubet June 22, 2021, 6:32pm 8

this doesn’t cover situations where there isnt a request path.