# Turbo Frames with Browser Destination/URL Replacement

**URL:** <https://discuss.hotwired.dev/t/turbo-frames-with-browser-destination-url-replacement/1552>\
**Category:** General\
**Created:** [December 23, 2020, 6:36am UTC](https://discuss.hotwired.dev/t/turbo-frames-with-browser-destination-url-replacement/1552 "2020-12-23T06:36:17Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![sammovale](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/sammovale/32/1341_2.png) [@sammovale](https://discuss.hotwired.dev/u/sammovale)\
**Post date:** [December 23, 2020, 6:36am UTC](https://discuss.hotwired.dev/t/turbo-frames-with-browser-destination-url-replacement/1552/1 "2020-12-23T06:36:17Z")

</div>

I have been working on trying to implement an “Application Shell” with navigation on the left and a search bar at the top. I want to have the search query “persist” between page navigation and so I used a Turbo Frame to do exactly that with a `data-turbo-frame` on the urls outside of the shell for the search results. This works exceptionally well, however it does not change the browser destination/URL.

The code looks a little something like this:

```
<div class="application_shell">
     <div class="search_component" >
     </div>

     <%= turbo_frame_tag "inner_shell" do %>
        <%= yield %>
     <%end%>
</div>

```

I was wondering could this functionality be added to Turbo/Hotwire or is there a far easier way that I am missing with the current version.

---

<div class="post-metadata">

**Author:** ![virk](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/virk/32/1107_2.png) [@virk](https://discuss.hotwired.dev/u/virk)\
**Post date:** [December 23, 2020, 12:20pm UTC](https://discuss.hotwired.dev/t/turbo-frames-with-browser-destination-url-replacement/1552/2 "2020-12-23T12:20:22Z")

</div>

This will be a dope feature to have. I am using streams for this, but it requires some effort to make it work for layouts like this.

Lets see if there is any way or if it can be supported in the future. Something like the following.

```auto
<turbo-frame id="content" navigates="_top">
</turbo-frame>

```

---

<div class="post-metadata">

**Author:** ![sammovale](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/sammovale/32/1341_2.png) [@sammovale](https://discuss.hotwired.dev/u/sammovale)\
**Post date:** [December 23, 2020, 12:48pm UTC](https://discuss.hotwired.dev/t/turbo-frames-with-browser-destination-url-replacement/1552/3 "2020-12-23T12:48:42Z")

</div>

Are you effectively making all the routes for the navigation just respond as a turbo\_stream using the replace action? I never thought of doing that and its actually quite a nice solution, just annoying having to change a lot more routes to use this. Might give that a go to get it properly working!

Another option I thought of is by using the event `turbo:before-stream-render` and doing some javascript history and URL changes but that may get messy.

---

<div class="post-metadata">

**Author:** ![sam](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/sam/32/1091_2.png) [@sam](https://discuss.hotwired.dev/u/sam)\
**Post date:** [December 23, 2020, 2:21pm UTC](https://discuss.hotwired.dev/t/turbo-frames-with-browser-destination-url-replacement/1552/4 "2020-12-23T14:21:15Z")

</div>

No, `<turbo-frame>` is its own scoped navigation context and won’t ever change the URL of the page. That’s what Turbo Drive visits are for.

---

<div class="post-metadata">

**Author:** ![sammovale](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/sammovale/32/1341_2.png) [@sammovale](https://discuss.hotwired.dev/u/sammovale)\
**Post date:** [December 23, 2020, 2:24pm UTC](https://discuss.hotwired.dev/t/turbo-frames-with-browser-destination-url-replacement/1552/5 "2020-12-23T14:24:20Z")

</div>

But won’t this reload the whole page and thus make a “persisted” layout such as a search bar, lose its typed text/results upon a Turbo Drive visit?

---

<div class="post-metadata">

**Author:** ![sam](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/sam/32/1091_2.png) [@sam](https://discuss.hotwired.dev/u/sam)\
**Post date:** [December 23, 2020, 2:27pm UTC](https://discuss.hotwired.dev/t/turbo-frames-with-browser-destination-url-replacement/1552/6 "2020-12-23T14:27:19Z")

</div>

You can use the `data-turbo-permanent` attribute to persist elements from one visit to another. There’s a section about this in the Handbook: [https://turbo.hotwire.dev/handbook/building#persisting-elements-across-page-loads](https://turbo.hotwire.dev/handbook/building#persisting-elements-across-page-loads)

---

<div class="post-metadata">

**Author:** ![sammovale](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/sammovale/32/1341_2.png) [@sammovale](https://discuss.hotwired.dev/u/sammovale)\
**Post date:** [December 23, 2020, 2:30pm UTC](https://discuss.hotwired.dev/t/turbo-frames-with-browser-destination-url-replacement/1552/7 "2020-12-23T14:30:30Z")

</div>

Oh of course! This was present in Turbolinks anyway! Thanks for the help

---

<div class="post-metadata">

**Author:** ![Intrepidd](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/intrepidd/32/1124_2.png) [@Intrepidd](https://discuss.hotwired.dev/u/Intrepidd)\
**Post date:** [December 28, 2020, 10:55pm UTC](https://discuss.hotwired.dev/t/turbo-frames-with-browser-destination-url-replacement/1552/8 "2020-12-28T22:55:58Z")

</div>

Turbo visits reset the window scroll though. I had a very specific use case where I have a search form (GET) on my page that is triggered via checkbox clicks through stimulus, I want each new search to be registered in the browser history for better navigation.

Turbo visits work but reset my scroll which is not convenient, restoring scroll after a visit is a bit tedious and not necessarily reliable, so I ended up implementing a stimulus controller that would update the navigation with the frame navigation : [https://gist.github.com/Intrepidd/ac68cb7dfd17d422374807efb6bf2f42](https://gist.github.com/Intrepidd/ac68cb7dfd17d422374807efb6bf2f42)

Maybe this a terrible idea, let me know 🙂

---

<div class="post-metadata">

**Author:** ![jonathanbruno](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jonathanbruno/32/1215_2.png) [@jonathanbruno](https://discuss.hotwired.dev/u/jonathanbruno)\
**Post date:** [January 10, 2021, 10:58pm UTC](https://discuss.hotwired.dev/t/turbo-frames-with-browser-destination-url-replacement/1552/9 "2021-01-10T22:58:50Z")

</div>

You use the GET as a strategy to detect the turbo-frame event right ( the get method updates the src attribute ) ? … I wish there was a turbo-frame:load event or something like that, it would be nice

---

<div class="post-metadata">

**Author:** ![jonathanbruno](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jonathanbruno/32/1215_2.png) [@jonathanbruno](https://discuss.hotwired.dev/u/jonathanbruno)\
**Post date:** [January 10, 2021, 10:59pm UTC](https://discuss.hotwired.dev/t/turbo-frames-with-browser-destination-url-replacement/1552/10 "2021-01-10T22:59:45Z")

</div>

You use the GET as a strategy to detect the turbo-frame event right ( the get method updates the src attribute ) ? … I wish there was a turbo-frame:load event or something like that, it would be nice

---

<div class="post-metadata">

**Author:** ![bfitch](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/bfitch/32/1280_2.png) [@bfitch](https://discuss.hotwired.dev/u/bfitch)\
**Post date:** [February 8, 2021, 3:38pm UTC](https://discuss.hotwired.dev/t/turbo-frames-with-browser-destination-url-replacement/1552/11 "2021-02-08T15:38:18Z")

</div>

Hey folks, I just opened a PR that enables updating URLs on frame navigation (links and form submissions) and Turbo Stream responses: [Optionally update URLs on Frame navigation and stream responses by bfitch · Pull Request #167 · hotwired/turbo · GitHub](https://github.com/hotwired/turbo/pull/167)

---

<div class="post-metadata">

**Author:** ![manunamz](https://avatars.discourse-cdn.com/v4/letter/m/ba9def/32.png) [@manunamz](https://discuss.hotwired.dev/u/manunamz)\
**Post date:** [May 31, 2021, 9:31pm UTC](https://discuss.hotwired.dev/t/turbo-frames-with-browser-destination-url-replacement/1552/12 "2021-05-31T21:31:35Z")

</div>

Hiya – I can see the solution here states to use [data-turbo-permanent](https://turbo.hotwire.dev/handbook/building#persisting-elements-across-page-loads), but what are you actually attaching `data-turbo-permanent` to to persist the url…?
