How to Change the Browser URL Without Reloading the Page in Drupal 11 Using SetBrowserUrl

Drupal 11.3.0 introduced a long-awaited feature that brings AJAX behavior to a new level — the Views module can now update the browser URL without reloading the page. This is made possible thanks to the new AJAX command SetBrowserUrl.

Why This Matters

Previously, AJAX-powered Views had one major UX issue: after filtering, sorting, or pagination, the page URL remained unchanged. This led to several problems:

• Users couldn’t copy a link to the current filtered state of the view
• Back/forward browser navigation didn’t work as expected
• Refreshing the page would reset the view to the default state

Now, all of that can be fixed with a single command 🚀

Meet SetBrowserUrl

Drupal added a new command that can be attached to any AjaxResponse:

use Drupal\views\Ajax\SetBrowserUrl;

Once executed, it updates the address bar without reloading the page, using the browser’s native history.pushState().

Simple Usage Example

Let’s say you have an AJAX-powered view with filters. After applying a filter, you want the URL to reflect the current state.

use Drupal\views\Ajax\SetBrowserUrl;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Url;

/**
 * Example AJAX callback in a custom form or View plugin.
 */
function mymodule_ajax_callback() {
  $response = new AjaxResponse();

  // Build the new URL, for example: /products/shoes?page=2&color=red
  $url = Url::fromRoute('view.products.page_1', [
    'arg1' => 'shoes',
  ], [
    'query' => [
      'page' => 2,
      'color' => 'red',
    ],
  ]);

  // Add the new command to update the browser URL
  $response->addCommand(new SetBrowserUrl($url->toString()));

  return $response;
}

Where You Can Use It

Final Thoughts

Drupal is steadily moving toward a lightweight SPA-like experience — without requiring React, Vue, or heavy JavaScript frameworks. With SetBrowserUrl, you can build dynamic interfaces with proper URL handling and navigation history effortlessly.