hx-push-url

The 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.

When a history navigation occurs, htmx will issue a request to the URL for that pages content and swap it in, replacing the current body. Note that this is a change from the htmx 2.0 behavior, which used a local cache for history.

The possible values of this attribute are:

1. true, which pushes the fetched URL into history.
2. false, which disables pushing the fetched URL if it would otherwise be pushed due to inheritance or hx-boost.
3. A URL to be pushed into the location bar. This may be relative or absolute, as per history.pushState().

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.

Another example:

<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.

Notes

• The HX-Push-Url response header has similar behavior and can override this attribute.