Saturn

This topic describes the unified breadcrumb navigation for consistent UI across SaaS applications.

Scenarios

The entry menu can vary depending on micro applications. The following figure shows the single-entry micro application.

Single-entry micro application

Assume this micro application has the following array:

[
  {
    type: 'root',
    name: 'Role Permissions',
    path: '/app/{id}', // This is the base route of this micro application.
  },
];

The following figure shows the multi-entry micro application.

Multi-entry micro application

Assume the Maintenance micro application has the following array:

[
  {
    type: 'root',
    name: 'Service Tickets',
  },
  {
    type: 'menu',
    name: 'Maintenance',
    path: '/app/{id}/repair', // /repair might be the route we declare in the micro application code.
  },
];

Type

interface setBreadcrumb {
  (breadcrumbInfos?: BreadcrumbInfoInput[]): void;
}

type BreadcrumbInfoInput =
  | {
      type: 'auto' | 'root';
      name?: never;
      path?: never;
    }
  | {
      type: 'menu';
      name?: never;
      path: string;
    }
  | {
      type: 'c';
      name: string; // The name of the breadcrumb.
      path: string; // The path navigated to when the breadcrumb is clicked.
    };

The above example is written in TypeScript. In the type field:

auto When type is set to auto, the entry point specified in manifest is used by default. For single-entry micro applications, only the root data is rendered. For multi-entry micro applications, root and menu data is rendered.
rootUsed to render the root data. For single-entry and multi-entry micro applications, there is only one element in the root data.
menuUsed to render menu data, which only applies to multi-entry micro applications.
cCustom breadcrumb data.

Use default breadcrumbs

The breadcrumb code is written in the top-level component. In the example, we write code in src/App.tsx.

import { useEffect } from 'react';
import { microProps } from 'src';

function App() {
  useEffect(() => {
    microProps.dynamicProps.setBreadcrumb([{ type: 'auto' }]);
  }, []);
  return <>.....</>;
}

In the example, we call the method dynamicProps.setBreadcrumb, with the request parameter of [{type:"auto"}]. This way, the main application controls the breadcrumb data.

The above example also applies to multi-entry micro applications. The only difference is that you need to call setBreadcrumb in each page-level component that is an entry to a micro application.

:::

You can pass in an empty array to cancel rendering.

import { useEffect } from 'react';
import { microProps } from 'src';
function App() {
  useEffect(() => {
    microProps.dynamicProps.setBreadcrumb([]);
  }, []);
  return <>.....</>;
}

Custom breadcrumbs

You can add the required breadcrumbs on top of the default breadcrumbs.

import { useEffect } from 'react';
// Example
function App() {
  return <Link to="/user">User</Link>;
}
function User() {
  useEffect(() => {
    microProps.dynamicProps.setBreadcrumb([
      { type: 'auto' },
      { type: 'c', name: 'user', path: '/user' },
    ]);
  }, []);
  return <div>User</div>;
}

In the above example, the micro application has page routing, and it is not registered in the manifest. The breadcrumb contains the current navigation information. Note that this API must be called in the specific page components.

Fully custom breadcrumbs

import { useEffect } from 'react';
// Example
function App() {
  return <Link to="/repair/user">User</Link>;
}
function User() {
  useEffect(() => {
    microProps.dynamicProps.setBreadcrumb([
      { type: 'root' },
      { type: 'menu', path: '/repair' },
      { type: 'c', name: 'user', path: '/repair/user' },
    ]);
  }, []);
  return <div>User</div>;
}

In the above example, we use the fully custom code to implement the feature similar to the last example.