---
description: "Returns the browser's current location.pathname, kept fresh without a router: use it to show something that depends on the page (a current-page marker in a navigation)."
---

# `usePathname`

Returns the browser's current `location.pathname`, kept fresh without a router: use it to show something that depends on the page (a current-page marker in a navigation). It follows every client-side router because it is driven by core's URL tracking ([`watchPathname`](/docs/reference/core/watch-pathname)). It is the same path the provider tests tools' `match` against, so you rarely need it for tools.

## Import

```ts
import { usePathname } from "@webmcp-agents/react";
```

## Example

Mark the current page in a navigation, with any router.

```tsx title="components/nav.tsx"
import { usePathname } from "@webmcp-agents/react";

// Mark the current page in a navigation, with any router.
export function Nav() {
  const path = usePathname();

  return (
    <nav>
      <a href="/" aria-current={path === "/" ? "page" : undefined}>
        Home
      </a>
      <a
        href="/orders"
        aria-current={path === "/orders" ? "page" : undefined}
      >
        Orders
      </a>
    </nav>
  );
}
```

## Options

None. The hook takes no arguments.

## Returns

`string`: `location.pathname`; `"/"` during server rendering. The component re-renders when it changes.

## Notes

- Updates come from the Navigation API's `currententrychange`, or, without it (Firefox before 147, older Safari), from `history.pushState` / `replaceState` (patched only while a component watches), `popstate` and `hashchange`.
- Notices arrive just after the navigation call returns, never inside it (Next.js changes the URL inside a React insertion effect).
- A hash route's path is not `location.pathname`: `usePathname()` stays on the real path. Tools' `match` does read `#/orders` as `/orders`.
- Works without a provider.

## See also

- [Tools across your app](/docs/build/tools-across-your-app), how `match` reads the URL
- [`WebAgentsProvider`](/docs/reference/react/web-agents-provider)
- [`useWebAgents`](/docs/reference/react/use-web-agents) (`pathname`, the value tools are matched against)
- [`watchPathname`](/docs/reference/core/watch-pathname)
- [`matchPath`](/docs/reference/core/match-path)