navigation.mdxβ’2 kB
---
title: "Navigation"
description: ""
icon: "signs-post"
---
By default, navigating within your embedded instance of Activepieces doesn't affect the client's browser history or viewed URL. Activepieces only provide a **handler**, that trigger on every route change in the **iframe**.
## Automatically Sync URL
You can use the following snippet when configuring the SDK, which will implement a handler that syncs the Activepieces iframe with your browser:
<Tip>
The following snippet listens when the user clicks backward, so it syncs the route back to the iframe using `activepieces.navigate` and in the handler, it updates the URL of the browser.
</Tip>
```js
activepieces.configure({
prefix: "/",
instanceUrl: 'INSTANCE_URL',
jwtToken: "GENERATED_JWT_TOKEN",
embedding: {
containerId: "container",
builder: {
disableNavigation: false,
hideLogo: false,
hideFlowName: false
},
dashboard: {
hideSidebar: false
},
hideFolders: false,
navigation: {
handler: ({ route }) => {
//route can include search params at the end of it
if (!window.location.href.endsWith(route)) {
window.history.pushState({}, "", window.location.origin + route);
}
}
}
},
});
window.addEventListener("popstate", () => {
const route = activepieces.extractActivepiecesRouteFromUrl({ vendorUrl: window.location.href });
activepieces.navigate({ route });
});
```
## Navigate Method
If you use `activepieces.navigate({ route: '/flows' })` this will tell the embedded sdk where to navigate to.
Here is the list for routes the sdk can navigate to:
| Route | Description |
| --- | --- |
| `/flows` | Flows table
| `/flows/{flowId}` | Opens up a flow in the builder
| `/runs` | Runs table
| `/runs/{runId}` | Opens up a run in the builder
| `/connections` | Connections table
| `/tables` | Tables table
| `/tables/{tableId}` | Opens up a table
| `todos` | Todos table
| `todos/{todoId}` | Opens up a todo