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

Behaviour

• Locale stripping: Removes the leading locale segment (e.g. /en-GB/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

• useLocale — current locale + locale switcher
• getPathWithoutLocale — the underlying utility used by this hook