Back to Content

NavigationDestination: url property

files/en-us/web/api/navigationdestination/url/index.md

latest1.3 KB
Original Source

{{APIRef("Navigation API")}}

The url read-only property of the {{domxref("NavigationDestination")}} interface returns the URL being navigated to.

Value

A string.

Examples

Handling a navigation using intercept()

js
navigation.addEventListener("navigate", (event) => {
  // Exit early if this navigation shouldn't be intercepted,
  // e.g. if the navigation is cross-origin, or a download request
  if (shouldNotIntercept(event)) {
    return;
  }

  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // The URL has already changed, so show a placeholder while
        // fetching the new content, such as a spinner or loading page
        renderArticlePagePlaceholder();

        // Fetch the new content and display when ready
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);
      },
    });
  }
});

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also