Missing deeper context breadcrumbs

In serverless breadcrumbs work a bit different from how they work on-prem: they are automatically built from the serverless navigation tree. Additional work needs to be done for serverless to set the deeper context breadcrumbs. Currently get started apps don't set deeper context breadcrumbs example:

Screenshot 2023-10-27 at 15 24 10

There are multiple ways to add deeper context breadcrumbs, the first one is manual and involves using a new serverless.setBreadcrumbs. The apps only need to set the end of breadcrumbs path which isn't already part of the side nav navigation tree.

Another way is simpler and it makes the navigation automatically merge the serverless navigational breadcrumbs from the navigation tree with the full breadcrumbs set using old core.chrome.setBreadcrumbs api. To opt-in into this apps need to add deepLinkId to the root breadcrumbs set in core.chrome.setBreadcrumbs. The serverless navigation will use this deepLinkId to merge the breadcrumbs set in core.chrome.setBreadcrumbs with the navigation tree breadcrumbs that are coming from the navigation tree. Here are some examples where we fixed it for some apps:

In some cases it could make sense to fix this on the navigation tree level:

Completely missing breadcrumbs for some pages

Another issue with breadcrumbs is that if a page is accessible from the app, but is not the part of the navigation tree, then the active path can be lost an nothing is highlighted in the side nav and breadcrumbs are empty.

Example:

Screenshot 2023-10-27 at 15 27 28

There are different ways to fix this depending on the use-case:

It is possible to override isActive check for some of the existing nodes in the navigation tree, to force the navigation path to be considered active

Example:

https://github.com/elastic/kibana/blob/9a8277e26086f8b89389e4eeba5c8e375d94f112/x-pack/plugins/serverless_observability/public/components/side_navigation/index.tsx#L160

It is possible to add new routes to the navigation tree, but hide them from the sidebar using sideNavStatus: 'hidden' this will fix the active path and the breadcrumbs

https://github.com/elastic/kibana/blob/9a8277e26086f8b89389e4eeba5c8e375d94f112/x-pack/plugins/serverless_observability/public/components/side_navigation/index.tsx#L43

It is possible to add more levels to the navigation tree, but hide the children in the sidenav by adding: renderAs: 'item', on the parent

elastic / kibana

[Serverless/Observability] Get started breadcrumbs need polish #170030

Missing deeper context breadcrumbs

Completely missing breadcrumbs for some pages