Keep navbar state across Turbo navigations with data-turbo-permanent

8156
0

Some UI elements should survive navigation: a music player, a search input, or a navbar with an open dropdown. Turbo’s data-turbo-permanent lets you mark a DOM node that shouldn’t be replaced during visits. I use it carefully—permanent nodes can keep stale state if you’re not mindful. My guideline is: only mark containers that are purely client-side state or that don’t need frequent server updates. For navbars, it’s great for preserving focus and preventing “flashes” when navigating. If the navbar needs server-rendered dynamic elements (like unread count), I keep those as separate small targets updated via turbo streams, rather than replacing the entire navbar.