Svelte Integration: usePathname Documentation

The usePathname function returns the current browser pathname with the locale segment stripped, as a Svelte Readable<string> store. It is useful for building locale-aware navigation (for example, determining which nav item is active) without having to manually remove the locale prefix.

Importing usePathname in Svelte

import { usePathname } from "svelte-intlayer";

Overview

usePathname creates a Svelte readable store that reads window.location.pathname, strips the locale prefix via getPathWithoutLocale, and emits a new value whenever the browser fires a popstate event (back/forward navigation). Subscribe with the $ store syntax in components.

Usage

<script lang="ts">
  import { usePathname } from "svelte-intlayer";

  export let href: string;
  export let label: string;

  const pathname = usePathname();
</script>

<a {href} aria-current={$pathname === href ? "page" : undefined}>
  {label}
</a>

Return Value

Behavior

• Locale stripping: Removes the leading locale segment (e.g. /fr/dashboard → /dashboard).
• Reactive: Emits a new value on every popstate event (browser back / forward navigation).
• SSR-safe: Returns "" when window is not available.
• Cleanup: The popstate listener is removed automatically when the last subscriber unsubscribes.

Example

<script lang="ts">
  import { usePathname } from "svelte-intlayer";

  const links = [
    { href: "/dashboard", label: "Dashboard" },
    { href: "/settings", label: "Settings" },
  ];

  const pathname = usePathname();
</script>

<nav>
  {#each links as link}
    <a
      href={link.href}
      style:font-weight={$pathname === link.href ? "bold" : "normal"}
    >
      {link.label}
    </a>
  {/each}
</nav>

Related