sodapopcan
I have a navbar component that I include at the top of all my live views. Since it reacts differently based on certain attributes passed to it that are loaded in live views, I can’t just stick it in live.html.heex.
So the top of a typical live view render function looks like this:
def render(assigns) do
~H"""
<.live_component
id="navbar"
module="MyApp.SomeNamespace.NavBar"
logged_in?={@logged_in?}
some_decision_based_on_liveview_assigns={@some_assign_unavailable_in_the_layout}
/>
"""
end
While I’m the type who loves some pretty code, I don’t strive for it at all costs if it hurts clarity. But I also hate noise and this started to feel really noisy. I realized that id and module are always static, so then I had the idea to wrap the live component in a functional one:
def navbar(assigns) do
~H"""
<.live_component
id="navbar"
module="MyApp.SomeNamespace.NavBar"
logged_in?={@logged_in?}
some_decision_based_on_liveview_assigns={@some_decision_based_on_liveview_assigns}
"""
end
So now in my live views I can simply do:
def render(assigns) do
~H"""
<.navbar logged_in?={@logged_in?} some_attr={@some_attr} />
"""
end
Other than that it’s hiding away a live component and that it maybe feels a little icky, I’m wondering: are there any drawbacks?
In anticipation of someone quoting that last sentence back to me saying, “That’s what’s wrong with it!”, my thoughts are that I would only use it in this one case where it’s going to be on basically every live view in my app. Maybe calling it <.live_navbar /> would it clear that it’s lying about being functional? 
I realize this is a bit of a bike shed, but I’m interested in opinions if they are out there, especially if there is some real danger I’m not thinking of.
Thanks!
Where Next?
Trending in Discussions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Courses that'll move you from confusion to "Aha, now I get it!"
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #ai
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #blog-post
- #elixirconf-us
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Master modern tools, write cleaner code, and tackle real-world challenges.
Producing high quality Elixir screencasts since 2017.
**Building the future of software with AI, trust, and human connection.**
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 8- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
mayel
Well this isn’t an answer but FYI live.html.heex has access to all assigns from your LiveView, so you could stick the nav there.
sodapopcan
No, that is an answer. I did know that but I wanted to avoid having to default all the “special” attrs to nil for the layout. Of course, now that I’m saying that out loud, that’s actually not such a big deal since in my case I only have one—I was really just prematurely optimizing for a scenario I probably will never have. Heh, ok yes, haha, thank you!
cmo
I was pondering my navbar recently and came to the conclusion that it shall be a function component in
live.html.heexand it’s brains shall be contained in anon_mounthook.sodapopcan
That’s along the lines of one of my thoughts, although I was gonna put stuff in
on_mountand still use a live component since my navbar makes database calls using optionally using assigns from the current page (liveview). It felt a little perverse. But ya, I think it’s going to end up having to be in theon_mountcallback as since I’ve posted this, I’ve already felt the pain of having to include boilerplate on every liveview I want a navbar on… which is all of them o_O This also means caring about the url inon_mountwhich is unfortunate but there are worse things in life.cmo
Know that you’re not alone in your suffering
. I tried a liveview, a sticky liveview, a layout component that I included in every liveview and a live component. The root level function component +
on_mountis the only one that could cater for everything my heart desires. This is indeed how they do it in live_beats.sodapopcan
That’s interesting—I’ve never defined
on_mountright in a liveview before. I see it’s doing to attach hooks but… I’ll have to dig into that later, and really finishing digging more into LiveBeats.cmo
They aren’t defining it in a liveview. This module is called from the
live_session, as per these lines.sodapopcan
Oh jeez, yes, I have to stop going on elixirforums at the end of my day. Cool cool, thank you!