> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Navigate Between Dashboard Pages in Studio Two

## Article: Navigate Between Dashboard Pages in Studio Two

## Article Link: https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-pages/navigate-between-dashboard-pages-in-studio-two.md

## Article Content:

# Navigate Between Dashboard Pages in Studio Two

You can connect multiple dashboard pages in your Studio Two site using the Dashboard SDK's [`navigate()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/navigate.md) and [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md) methods. A common use case is the master-detail pattern: a list page that displays items and a detail page that shows information about a selected item.

`navigate()` always targets a dashboard page. You can also call it from other dashboard extensions, such as plugins and menu plugins. This article covers the page-to-page flow in a Studio Two site. For the full API, see [About Dashboard Page Navigation](https://dev.wix.com/docs/sdk/host-modules/dashboard/about-dashboard-page-navigation.md).

To navigate between dashboard pages:

1. Get the target page's ID.
2. Navigate from the source page.
3. Retrieve data on the target page.

## Step 1 | Get the target page's ID

You need at least 2 [dashboard pages](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-pages/add-a-dashboard-page-extension-in-studio-two.md) in the site project, and the `@wix/dashboard` package, which Studio Two site projects already include.

Find the target page's ID in its `.extension.ts` file. This is the `id` field:

```ts
export default extensions.dashboardPage({
  id: '1600e523-f812-497d-9323-46e82ab78bd6',
  title: 'Item details',
  routePath: 'item-details',
  component: './extensions/dashboard/pages/item-details/item-details.tsx',
});
```

## Step 2 | Navigate from the source page

On the source page, call `dashboard.navigate()` to send the Wix user to the target page. Pass data through the `relativeUrl` parameter:

```tsx
import { dashboard } from '@wix/dashboard';

function ItemList({ items }) {
  const handleItemClick = (itemId: string) => {
    dashboard.navigate({
      pageId: '1600e523-f812-497d-9323-46e82ab78bd6',
      relativeUrl: itemId,
    });
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item._id} onClick={() => handleItemClick(item._id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}
```

## Step 3 | Retrieve data on the target page

On the target page, call `dashboard.observeState()` to read the data passed through the URL. The callback fires when the page initializes and whenever the state updates.

The first parameter contains a `location` object with the `pathname` passed in `relativeUrl`:

```tsx
import { useEffect, useState } from 'react';
import { dashboard } from '@wix/dashboard';

function ItemDetails() {
  const [itemId, setItemId] = useState<string | null>(null);

  useEffect(() => {
    dashboard.observeState((pageParams) => {
      const id = pageParams.location.pathname.replace('/', '');
      setItemId(id);
    });
  }, []);

  if (!itemId) return <div>Loading...</div>;

  return <div>Showing details for item: {itemId}</div>;
}
```

Use the retrieved ID to fetch and display the item's data.

## See also

- [About Dashboard Pages](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-pages/about-dashboard-pages.md)
- [Build a Dashboard Page in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-pages/build-a-dashboard-page-in-studio-two.md)
- [`navigate()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/navigate.md)
- [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md)
- [About Dashboard Page Navigation](https://dev.wix.com/docs/sdk/host-modules/dashboard/about-dashboard-page-navigation.md)
- [About Navigating to Dashboard Pages Built by Wix](https://dev.wix.com/docs/dashboard-extensions/dashboard-pages-built-by-wix/page-navigation/about-navigating-to-dashboard-pages-built-by-wix.md)