hx-push-url

View as Markdown Open this page as Markdown
For LLMs
llms.txt htmx overview for LLMs
llms-full.txt Complete htmx docs for LLMs

Pushes URL into browser history

The hx-push-url attribute pushes a URL into browser history.

This creates a history entry for back and forward navigation. Core htmx restores the page by fetching its URL again. Use the hx-history-cache extension to restore saved DOM snapshots instead.

Syntax

<div hx-get="/account" hx-push-url="true">Go to My Account</div>

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 pushes /account into the browser history. Returning to this entry causes core htmx to fetch /account again.

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