In This Article

navigate()

Navigates the user to another page in the dashboard.

Navigate to Dashboard Setup Page

You can identify the page to navigate to using its page ID. If you specify an invalid page ID, 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 or building apps with Blocks.

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.

Method Declaration

Copy


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

Parameters

Name	Type	Description
`destination`	Destination	Destination page to navigate to.
`options`	NavigationOptions	Optional. Options for the navigation.

Destination Object

Copy


{
    pageId: string;
    relativeUrl?: string;
}

Name	Type	Description
`pageId`	`string`	ID of the page to navigate to. See Page IDs 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

Copy


{
    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, or replaces the URL in the current entry.

Examples

Note: To call this method in self-hosted apps, you need to create a client. See the setup guide for more details.

Navigate to the dashboard's homepage

Copy


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

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

Copy


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

Copy


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

Open bookings settings page in an overlay page

Copy


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

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

Copy


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

Did this help?