<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="351156" data-post-id="351156">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="linusdm" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/linusdm/120/30659_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  linusdm
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="pelopo" data-post="7" data-topic="68073">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/p/35a633/48.png" class="avatar"> pelopo:</div>
<blockquote>
<p>I tried to modify the handle-params in one of the live views by adding the url, but got different errors later in heex saying that I can’t use handle_params in a child LiveView . And even if I could, I would need to add this option manually to every liveview that is connected to a menu button.</p>
</blockquote>
</aside>
<p>There are two ways to avoid the duplication of attaching the suggested LV hook (which is an alternative of having the <code>handle_params</code> callback of each LiveView assign the current url, which indeed would become very verbose):</p>
<ul>
<li>attach on the level of a <a href="https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Router.html#live_session/3-options" rel="noopener nofollow ugc">live_session</a> (look for the <code>:on_mount</code> option)</li>
<li>attach using the <a href="https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#on_mount/1" rel="noopener nofollow ugc">Phoenix.LiveView.on_mount/1</a> macro. You can use this method in combination with the <code>__using__</code> macro that is scaffolded in your typical <code>MyAppWeb</code> module, so that it automatically gets added to each LiveView that has <code>use MyAppWeb, :live_view</code>. This approach will also minimise repetition.</li>
</ul>
<p>If you’re using the suggested LV hook, then you shouldn’t need the <code>handle_params</code> hook in any child LiveView (which indeed is not called since it’s not mounted in the router, hence the error). The url will be available as an assign on the socket of the child LiveView (assuming you’re using <a href="https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#live_render/3" rel="noopener nofollow ugc">live_render/3</a>).</p>
<p>I’d be surprised that the LV hook method is more involved than the JavaScript approach. But I must admit that the LV hooks have a steep learning curve. See you on the other side <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="351156" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-get-current-url-in-app-html-heex/68073/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-351156" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="351156"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="351160" data-post-id="351160">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="sodapopcan" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sodapopcan/120/34668_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  sodapopcan
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="pelopo" data-post="11" data-topic="68073">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/p/35a633/48.png" class="avatar"> pelopo:</div>
<blockquote>
<p>I don’t think a couple of strings with slashes would clog the socket</p>
</blockquote>
</aside>
<p>URLs can get very large depending on the application, especially when you take query parameters into account.  That said, I do agree it could be made (even) simpler to opt into it, but that would require someone proposing a solution and doing the work.  I doubt it’s a priority for the Phoenix team as most people are satisfied with status quo once they learn about it (I’ve answered this question a times on this forum).</p>
<p>Conversely, many people express concern over how much stuff is in the socket (a little more than they should be by me).  So I do agree with the decision not to include it by default as many people would end up not using it.  And again, people who do need it don’t always need the whole URL, so it would just open up other types of complaints.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="351160" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-get-current-url-in-app-html-heex/68073/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-351160" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="351160"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="351164" data-post-id="351164">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="pelopo" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  pelopo
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This is great <a class="mention" href="/u/linusdm" rel="nofollow">@linusdm</a> ! Thanks a bunch! I used the <span class="hashtag-raw">#1</span> . Now I don’t need to go into each index.ex and show.ex for each route and it even works with my LV within LV case.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="351164" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-get-current-url-in-app-html-heex/68073/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-351164" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="351164"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="351165" data-post-id="351165">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="pelopo" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  pelopo
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>it makes sense <a class="mention" href="/u/sodapopcan" rel="nofollow">@sodapopcan</a>.  Thanks for your help!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="351165" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-get-current-url-in-app-html-heex/68073/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-351165" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="351165"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="351171" data-post-id="351171">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jswanner" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jswanner/120/24585_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jswanner
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="pelopo" data-post="11" data-topic="68073">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/p/35a633/48.png" class="avatar"> pelopo:</div>
<blockquote>
<p>notice what in my opinion is something that is taken for granted elsewhere while that elsewhere is much more primitive (Svelte, Next.js) than Phoenix.</p>
</blockquote>
</aside>
<p>We’ll if we’re comparing client-side and server-side applications, then those are very different beasts. It’s not the client-side frameworks ultimately providing you with the current URL but the JavaScript runtime that’s making that value always available (<code>window.location</code>). It’s a little bit like how you can always get the PID of any BEAM process (with <code>self()</code>).</p>
<aside class="quote no-group" data-username="pelopo" data-post="7" data-topic="68073">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/p/35a633/48.png" class="avatar"> pelopo:</div>
<blockquote>
<p>the logic would be “if the current_path is /example then highlight button “example”</p>
</blockquote>
</aside>
<p>In my experience, using the current URL/path for marking navigation items as active/inactive starts off great, but then pretty quickly becomes inadequate. When sub navigation gets added we’ll switch from “equals” to “starts with,” then it always happens where multiple starting paths are under the same root navigation item and now we’ve got to rethink the strategy.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="351171" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-get-current-url-in-app-html-heex/68073/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-351171" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="351171"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="351173" data-post-id="351173">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="sodapopcan" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sodapopcan/120/34668_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  sodapopcan
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="jswanner" data-post="16" data-topic="68073">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jswanner/48/24585_2.png" class="avatar"> jswanner:</div>
<blockquote>
<p>In my experience, using the current URL/path for marking navigation items as active/inactive starts off great, but then pretty quickly becomes inadequate.</p>
</blockquote>
</aside>
<p>This is the only way I’ve ever done it—what’s the alternative?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="351173" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-get-current-url-in-app-html-heex/68073/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-351173" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="351173"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #16"></div>
  </section>
</div>
    <div class="postbit" id="351174" data-post-id="351174">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jswanner" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jswanner/120/24585_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jswanner
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>In cases where I only need to worry about one level of navigation, what I use is pretty similar to <a href="https://fly.io/phoenix-files/liveview-active-nav/" rel="noopener nofollow ugc">what’s described here</a>, except I use the value of <code>socket.assigns.live_action</code> as the fallback value for what the assign the article calls <code>active_tab</code> instead of <code>nil</code>.</p>
<p>In cases where I have to worry about multiple levels of navigation, I prefer to be even more explicit and will put something like the following in all the LiveViews:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">def mount(_, _, socket) do
  assign(socket, nav_root: :account, nav_sub: :preferences)
end
</code></pre>
<p>That way when I get a request along the lines of “I know when want everything under <code>/account</code> to market the ‘Account’ link as active, <em>except</em> when they are on <code>/account/xyz</code> <em>then</em> we want ‘Foo’ active.” I open up that one LiveView file, add <code>assign(socket, :nav_root, :foo)</code> and move on.</p>
<p>If using the current URL works for you in marking your nav items as active/inactive then that’s great. I personally wouldn’t be passing the URL/path to the templates do the active/inactive check down at that level. Instead, I would use a <code>handle_params</code> hook that sets an assign <em>based</em> on the URL, that way in those exceptional cases the value can be easily overridden in the respective LiveView.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="351174" data-batch-url="/posts/batch_likers">
                        4
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-get-current-url-in-app-html-heex/68073/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-351174" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="351174"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-most-liked cat-most-liked" title="One of the top 3 liked posts in this thread!"></div>
  </section>
</div>
    <div class="postbit" id="351176" data-post-id="351176">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="sodapopcan" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sodapopcan/120/34668_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  sodapopcan
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Oh right, that all makes sense.  I’ve just been doing it based off URL for so long that I never thought to it any other way.  But ya, that makes sense.  Thanks!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="351176" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-get-current-url-in-app-html-heex/68073/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-351176" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="351176"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>