This is the legacy documentation of Project-level Custom Applications, which is in maintenance mode. Visit the new documentation for Org-level Custom Applications.

Menu Links

The main navigation is positioned on the left side of each Merchant Center screen. It contains links to the different applications within a project.

The Merchant Center is composed of multiple independent applications, where each application defines its own set of links. However, the main navigation must contain links from all the available applications for a project. The links are rendered dynamically on runtime, where the main navigation pulls the data from a common source.

Additionally, links to Custom Applications are also fetched dynamically, based on the registered applications within a project.

Links for local development

However, when developing a Custom Application locally, we can't fetch any configuration dynamically. This is because only one application is running locally and therefore links to other applications are pretty much useless.

Therefore, in development only links of the Custom Application should be rendered. This can be done using one of the following approaches:

Via the menu.json file. This is the default approach.
Via the Application Config. This is a new opt-in approach, available from version >= 20.8.0.

Configure the menu links in a menu.json file. The file then should be loaded through a special prop DEV_ONLY__loadNavbarMenuConfig that is only available in development mode.

// entry-point.js

const EntryPoint = () => (
  <ApplicationShell
    DEV_ONLY__loadNavbarMenuConfig={() =>
      import('../../../menu.json').then(data => data.default || data)
    }
    // other props...
  />
);

The menu.json is only used for development. For production usage, the configuration of the links needs to be registered in the Merchant Center.

Menu Links

Links for local development

Menu links in menu.json

Menu links in application config