DOM Studio

Navigation CMS

App navigation builder

Edit nested menu structure, route metadata, feature gates, and audience rules before publishing a versioned app menu.

Unsaved draft

Menu items

Drag the tree or select a row to edit metadata.

Gated links

Role, admin, or draft-only routes need policy checks.

Publish state

2 changed

Not published from this draft

Menu hierarchy

Keyboard navigable tree with nested drag/drop reordering.

1 hidden

Overview/appEveryone

Dashboard/app/dashboardEveryone

Reports/app/reportsRole gated

Operations/app/opsRole gated

Customers/app/ops/customersRole gated

Automation/app/ops/automationHidden draft

Billing/app/billingAdmins only

Selected path

Overview / Reports

Selected item

Reports

Saved reports and scheduled exports.

Role gated

Menu label

Route path

Internal description

Visibility rule

Audience tags

Workspace adminsEnterprise plan

Feature flag key

Requires sign in

Publish readiness

Route looks valid

Label is ready for navigation display.
Audience rule has at least one selected cohort.
Protected routes should still enforce server authorization.

Live preview

Switch viewport targets before publishing.

Preview mode

Acme Workspace

desktop menu preview

Draft payload

{
  "draftId": "nav_draft_0924",
  "status": "unsaved",
  "selectedItemId": "reports",
  "previewMode": "desktop",
  "items": [
    {
      "id": "overview",
      "label": "Overview",
      "url": "/app",
      "visibility": "everyone",
      "audience": [
        "all-users"
      ],
      "featureFlag": null,
      "requiresAuth": true,
      "sortOrder": 10
    },
    {
      "id": "dashboard",
      "label": "Dashboard",
      "url": "/app/dashboard",
      "visibility": "everyone",
      "audience": [
        "all-users"
      ],
      "featureFlag": null,
      "requiresAuth": true,
      "sortOrder": 20
    },
    {
      "id": "reports",
      "label": "Reports",
      "url": "/app/reports",
      "visibility": "role-gated",
      "audience": [
        "workspace-admins",
        "enterprise-plan"
      ],
      "featureFlag": "reports_v2",
      "requiresAuth": true,
      "sortOrder": 30
    },
    {
      "id": "operations",
      "label": "Operations",
      "url": "/app/ops",
      "visibility": "role-gated",
      "audience": [
        "workspace-admins",
        "support-agents"
      ],
      "featureFlag": null,
      "requiresAuth": true,
      "sortOrder": 40
    },
    {
      "id": "customers",
      "label": "Customers",
      "url": "/app/ops/customers",
      "visibility": "role-gated",
      "audience": [
        "support-agents",
        "workspace-admins"
      ],
      "featureFlag": null,
      "requiresAuth": true,
      "sortOrder": 50
    },
    {
      "id": "automation",
      "label": "Automation",
      "url": "/app/ops/automation",
      "visibility": "hidden",
      "audience": [
        "beta-testers"
      ],
      "featureFlag": "automation_builder",
      "requiresAuth": true,
      "sortOrder": 60
    },
    {
      "id": "billing",
      "label": "Billing",
      "url": "/app/billing",
      "visibility": "admins",
      "audience": [
        "workspace-admins",
        "billing-managers"
      ],
      "featureFlag": null,
      "requiresAuth": true,
      "sortOrder": 70
    }
  ],
  "changedIds": [
    "reports",
    "automation"
  ]
}

Publish navigation draft?

Create a versioned menu that your app shell can fetch and cache.

This draft contains 2 changed items across 7 navigation records.

Backend checks to run

Validate every route and parent ID.
Confirm feature flags exist in the current workspace.
Recompute role visibility before writing the published version.