Skip to main content

Navigation Manifest Examples

This document provides developer-focused examples for configuring navigation in Framework M using manifests inside plugin.config.ts.

[!NOTE] Navigation is defined via manifests and merged by PluginRegistry at runtime.

Example plugin.config.ts​

import type { FrameworkMPlugin } from "@framework-m/plugin-sdk";

export default {
  name: "wms",
  version: "1.0.0",
  manifests: [
    {
      app_id: "wms",
      label: "Warehouse",
      icon: "package",
      resources: [
        {
          name: "wms.dashboard",
          label: "Warehouse Dashboard",
          route: "/wms/dashboard",
          icon: "layout-dashboard",
          type: "Page",
        },
        {
          name: "wms.item",
          label: "Inventory Items",
          route: "/app/WMSItem/list",
          icon: "box",
          type: "DocType",
        },
      ],
    },
    {
      app_id: "core",
      label: "Core",
      icon: "settings-2",
      resources: [
        {
          name: "wms.audit",
          label: "Inventory Audit",
          route: "/wms/reports/audit",
          icon: "search-check",
          type: "Report",
        },
      ],
    },
  ],
  routes: [
    {
      path: "/wms/dashboard",
      element: () => import("./pages/Dashboard"),
    },
  ],
} satisfies FrameworkMPlugin;

Resource Patterns​

1) Standard DocType (List View)​

{
  name: "wms.warehouse",
  label: "Warehouse Master",
  route: "/app/Warehouse/list",
  icon: "warehouse",
  type: "DocType",
}

2) Singleton DocType (Direct Form)​

{
  name: "wms.settings",
  label: "WMS Configuration",
  route: "/app/WMSSettings/edit/singleton",
  icon: "settings",
  type: "DocType",
}

3) Custom Plugin Page​

{
  name: "wms.receiving",
  label: "Receiving Dock",
  route: "/wms/receiving",
  icon: "truck",
  type: "Page",
}

4) Nested Resources​

{
  name: "wms.reports",
  label: "Reports",
  route: "/wms/reports",
  icon: "file-chart",
  children: [
    {
      name: "wms.reports.stock",
      label: "Stock Summary",
      route: "/wms/reports/stock",
      icon: "chart-bar",
    },
  ],
}

Permissions and Visibility​

{
  name: "wms.secure",
  label: "Secure Ops",
  route: "/wms/secure",
  icon: "lock",
  permissions: ["wms:secure:read"],
  visibility_policy: {
    roles: ["manager"],
    feature_flag: "secure_ops",
  },
}

Route Definitions​

Routes are resolved by the shell and should be lazy-loaded for code-splitting.

routes: [
  { path: "/wms/receiving", element: () => import("./pages/Receiving") },
],