Orbis Logo Orbis

navigate

Navigate between routes

Changes the current route/page.

Syntax

json 
{
  "type": "navigate",
  "to": "/path/to/page"
}

Properties

PropertyTypeRequiredDescription
tostringYesTarget route path
replaceboolean-Replace history instead of push
stateobject-Navigation state

Examples

Basic Navigation

json 
{
  "type": "navigate",
  "to": "/dashboard"
}

With Dynamic Path

json 
{
  "type": "navigate",
  "to": "/items/{{state.selectedId}}"
}

From Event Context

json 
{
  "type": "Table",
  "events": {
    "on_row_click": [
      { "type": "navigate", "to": "/users/{{$row.id}}" }
    ]
  }
}

Replace History

json 
{
  "type": "navigate",
  "to": "/login",
  "replace": true
}

With State

json 
{
  "type": "navigate",
  "to": "/items/new",
  "state": {
    "prefill": "{{state.selectedTemplate}}"
  }
}

Common Patterns

After Form Submit

json 
{
  "type": "Form",
  "events": {
    "on_submit": [
      {
        "type": "call_api",
        "api": "createItem",
        "on_success": [
          { "type": "show_toast", "message": "Created!", "level": "success" },
          { "type": "navigate", "to": "/items" }
        ]
      }
    ]
  }
}

After Delete

json 
{
  "type": "call_api",
  "api": "deleteItem",
  "on_success": [
    { "type": "show_toast", "message": "Deleted" },
    { "type": "navigate", "to": "/items", "replace": true }
  ]
}

Back Navigation

json 
{
  "type": "Button",
  "label": "Back",
  "variant": "ghost",
  "events": {
    "on_click": [
      { "type": "navigate", "to": "/items" }
    ]
  }
}

Conditional Navigation

json 
{
  "type": "conditional",
  "condition": "{{state.isAuthenticated}}",
  "then": [
    { "type": "navigate", "to": "/dashboard" }
  ],
  "else": [
    { "type": "navigate", "to": "/login" }
  ]
}

Tab-Based Navigation

json 
{
  "type": "Tabs",
  "events": {
    "onTabChange": [
      { "type": "navigate", "to": "/settings/{{$value}}" }
    ]
  }
}

External URLs

For external URLs, use open_url instead:

json 
{
  "type": "open_url",
  "url": "https://github.com"
}

Route Parameters

Accessing Route Params

In page definitions, access route params via params:

json 
{
  "route": "/items/:id",
  "on_mount": [
    {
      "type": "call_api",
      "api": "getItem",
      "args": { "id": "{{params.id}}" }
    }
  ]
}

Building Dynamic Routes

json 
{
  "type": "navigate",
  "to": "/items/{{state.item.id}}/edit"
}

Query Parameters

Include query params in the path:

json 
{
  "type": "navigate",
  "to": "/items?category={{state.selectedCategory}}&sort={{state.sortField}}"
}

Best Practices

  1. Use replace for redirects - Prevents back-button loops
  2. Navigate after success - Wait for API completion
  3. Preserve history - Don’t use replace unnecessarily
  4. Use relative paths - For plugin routes
PreviousUpdate StateNextCall API