> 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()

## Article: navigate()

## Article Link: https://dev.wix.com/docs/sdk/host-modules/dashboard/navigate.md

## Article Content:

# navigate()

Navigates the user to another page in the dashboard.

![Navigate to Dashboard Setup Page](https://wixmp-833713b177cebf373f611808.wixmp.com/images/817892bd30e14496aa1beaf9489e5270.gif)

To identify a page to navigate to you can:
- Look up it's [page ID](https://dev.wix.com/docs/sdk/host-modules/dashboard/page-ids.md).
- Use a builder method to generate the [destination object](#destination-object) for a particular page. Several SDK modules include builder methods for the pages relevant to each module. For example, [`bookings`](https://dev.wix.com/docs/sdk/backend-modules/bookings/extensions/dashboard-pages/export-booking-data.md), [`blog`](https://dev.wix.com/docs/sdk/backend-modules/blog/extensions/dashboard-pages/blog-analytics.md), and [`ecom`](https://dev.wix.com/docs/sdk/backend-modules/ecom/extensions/dashboard-pages/delivery-profile.md) all provide builder methods.

If you specify an invalid page ID when you call this function, the Wix user will see "Page Not Found" in their dashboard.

>**Note:** Currently, you can't call `navigate()` to navigate to pages built when [developing sites](https://dev.wix.com/docs/develop-websites.md) or [building apps with Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-blocks.md).

You can specify how to display the page you're navigating to using the `displayMode` option.

There are two display modes available:
- **Main display mode**: The browser replaces the current main page content with the new page.
- **Overlay display mode**: The new page is displayed in a modal overlay on top of the main page.

Learn more about [dashboard page navigation](https://dev.wix.com/docs/sdk/host-modules/dashboard/about-dashboard-page-navigation.md).

## Method Declaration

```ts
(destination: Destination, options?: NavigationOptions) => void
```

## Parameters

| Name          | Type                                            | Description                           |
|:--------------|:------------------------------------------------|:--------------------------------------|
| `destination` | [Destination](#destination-object)              | Destination page to navigate to.           |
| `options`     | [NavigationOptions](#navigationoptions-object) | Optional. Options for the navigation. |



### Destination Object
```ts
{
    pageId: string;
    relativeUrl?: string;
}
```

| Name           | Type     | Description                                                                                            |
|:---------------|:---------|:-------------------------------------------------------------------------------------------------------|
| `pageId`       | `string` | ID of the page to navigate to. See [Page IDs](https://dev.wix.com/docs/sdk/host-modules/dashboard/page-ids.md) to find the appropriate ID.    |
| `relativeUrl` | `string` | Optional. URL segment to append to the base URL of the selected page. Can include path segments, a query string, and a fragment identifier. |


### NavigationOptions Object
```ts
{
    displayMode?: "auto" | "main" | "overlay";
    history?: "push" | "replace" ;
}
``` 

| Name           | Type     | Description                                                                                            |
|:-----------|:---------|:-------------------------------------------------------------------------------------------------------|
| `displayMode` | `"main" \| "overlay" \| "auto"` | When using `main`, the browser replaces the current main page content with the new page. When using `overlay`, the new page is displayed in a modal overlaid on top of the main page.`"auto"` (default) causes the page to be loaded in the current context. This means if `navigate()` is called from the main page, the main page changes. If it's called from an overlay page, the overlay content changes to the new page. | 
| `history`  | `"push" \| "replace"` | Optional. Determines whether the URL of the page being navigated to is added to the browser's [session history](https://developer.mozilla.org/en-US/docs/Web/API/History_API), or replaces the URL in the current entry. |


## Examples
> **Note:** To call this method in [self-hosted apps](https://dev.wix.com/docs/sdk/articles/get-started/about-self-hosted-apps.md), you need to create a [client](https://dev.wix.com/docs/sdk/articles/set-up-a-client/about-the-wix-client.md). See the [setup](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) guide for more details.

### Navigate to the dashboard's homepage

```typescript
dashboard.navigate({pageId: "2e96bad1-df32-47b6-942f-e3ecabd74e57"});
```

### Navigate to your own app's page with some internal state

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

dashboard.navigate({pageId: <your-page-id>, relativeUrl: "/an/internal/state?param=value"})
```

### Navigate to a relative route of the current page

```typescript
dashboard.navigate({relativeUrl: "/some/internal/route"})
```

### Open bookings settings page in an overlay page

```typescript
dashboard.navigate({pageId: "bcdb42a8-2423-4101-add6-cbebc1951bc2"}, {displayMode: "overlay"});
```

### Navigate to the home page as a main page from inside an overlay page

```typescript
dashboard.navigate({pageId: "2e96bad1-df32-47b6-942f-e3ecabd74e57"}, {displayMode: "main"});
```