hx-push-url attribute allows you to push a URL into the browser location history.
This creates a new history entry, allowing navigation with the browser’s back and forward buttons.
htmx snapshots the current DOM and saves it into its history cache, and restores from this cache on navigation.
The possible values of this attribute are:
true, which pushes the fetched URL into history.
false, which disables pushing the fetched URL if it would otherwise be pushed due to inheritance or
Here is an example:
<div hx-get="/account" hx-push-url="true"> Go to My Account </div>
This will cause htmx to snapshot the current DOM to
localStorage and push the URL `/account’ into the browser location bar.
<div hx-get="/account" hx-push-url="/account/home"> Go to My Account </div>
This will push the URL `/account/home’ into the location history.
hx-push-urlis inherited and can be placed on a parent element
HX-Push-Urlresponse header has similar behavior and can override this attribute.
hx-history-eltattribute allows changing which element is saved in the history cache.