Portal Community
App Studio

Navigation Overview

App Studio navigation has two layers that work together: the visual sidebar navigation that users see, and the URL routing system that drives which AppPage renders.

Two Navigation Layers

Sidebar Navigation (Visual)

A configurable sidebar (or top-nav) with items and groups. Items have labels, icons, and target pages. The active item is highlighted based on the current URL. Purely visual — driven by URL routing.

URL Routing (Structural)

Each AppPage has a URL route pattern. Navigating within the app changes the URL to match the target AppPage's route. URL parameters become {{ route.* }} variables accessible in widgets.

URL Structure

// App Studio URL pattern
/app/{tenantId}/{appId}/{pageRoute}?{queryParams}

// Examples:
/app/acme/crm/leads               → Leads list AppPage
/app/acme/crm/leads/lead-123      → Lead detail AppPage (route.id = "lead-123")
/app/acme/crm/reports?year=2026   → Reports AppPage (URL-synced variable: year = "2026")

Navigation Config Structure

// App navigation config (app root settings)
{
  "navigation": {
    "type": "sidebar",       // "sidebar" | "topnav" | "none"
    "position": "left",      // "left" | "right" (for sidebar)
    "logo": {
      "text": "CRM Portal",
      "icon": "building"
    },
    "items": [               // ordered list of nav items and groups
      {
        "type": "item",
        "label": "Dashboard",
        "icon": "gauge",
        "targetPageId": "dashboard"
      },
      {
        "type": "group",
        "label": "Leads",
        "items": [
          { "type": "item", "label": "All Leads", "icon": "users", "targetPageId": "leads-list" },
          { "type": "item", "label": "My Leads", "icon": "user", "targetPageId": "my-leads" }
        ]
      }
    ]
  }
}

Active State Management

The sidebar automatically highlights the active navigation item by matching the current URL against each item's targetPageId route. Nested routes highlight the parent item:

Next: Sidebar Navigation →