When working with web applications, it’s common to navigate between different pages. It’s one of the basic parts of a web application.

While using HTMX, it offers a few ways to achieve navigation between pages. Let’s explore them.

  1. hx-push-url attribute ( client )

This attribute is used to push a new URL to the browser’s history. This will change the URL without reloading the page.

<a hx-get="/about" hx-push-url="true">About</a>

or

<a hx-get="/about" hx-push-url="/about-page">About</a>
  1. Hx-Push-Url header ( server )

We can also use Hx-Push-Url header to push a new URL to the browser’s history. This will change the URL without reloading the page.

Hx-Push-Url: /about
  1. Hx-Location header ( server )

This will do a client side redirect to the URL without reloading the page.

Hx-Location: /about
  1. Hx-Redirect header ( server )

This will do a full page redirect to the given URL.

Hx-Redirect: /about

With these simple methods, we can achieve navigation between pages in a HTMX powered web application.