How to show 'navigation item links' in Breadcrumb based on user journey?

[Rajumuddana]

Hi All,

We know that ‘Bread crumb’ components renders the navigation link items based on page content structure.

But, my client has asked to customise that based on user navigation journey.

Use case:

I have a page ‘/content/app/us/en/abc’ and it has a link to navigate to ‘/content/app/us/en/xyz’, now the ask is the moment I land on the ‘/content/app/us/en/xyz’ by clicking link on ‘/content/app/us/en/abc’ page, my Breadcrumb should show navigation items as

‘English -> abc -> xyz’ instead of  ‘English -> xyz’

To implement this from FE through JS, there are chances of flickering issues.

Is there a way to do it from Backend by fetching ‘Referer’ (i don’t think that is not feasible)

Is there a way to achieve this or better way to address the ask?

Thanks,

Raju

[Pradeep_Kumar_Srivastav · Accepted solution]

Hi @Rajumuddana ,

Have you tried Session-Based Navigation History?

You can -

• Store the user's navigation history in the session. Each time a user clicks a link that navigates to a new page, you store the referring page in the session. (Create a custom servlet or a service to manage and store the navigation history in the user session)
• When rendering the breadcrumb on the target page, use the session data to construct the breadcrumb trail.

[PAGIDALAGURUKRISHNA999]

Hi @Rajumuddana : Can you try this below :

1.Session-based Navigation Tracking

Implement a session-based navigation tracking system on the backend. When a user navigates from one page to another, store the navigation path in the user's session. Then, use this session data to generate the breadcrumb navigation.

2. Custom Breadcrumb API

Create a custom API on the backend that generates the breadcrumb navigation based on the user's navigation journey. This API can take into account the user's navigation history and return the customized breadcrumb data.

3. URL Parameter-based Navigation

Pass the navigation path as a URL parameter when the user clicks on a link. For example, when the user clicks on the link from /content/app/us/en/abc to /content/app/us/en/xyz, the URL can be modified to /content/app/us/en/xyz?from=abc. The backend can then use this URL parameter to generate the customized breadcrumb navigation.

While there are challenges with implementing this feature, there are alternative solutions that can achieve the desired breadcrumb navigation based on the user's navigation journey. By using a session-based navigation tracking system, a custom breadcrumb API, or URL parameter-based navigation, you can provide a more personalized and user-friendly experience for your client's users.

[pulkitvashisth]

Hi @Rajumuddana 
The standard approach would be to use the ootb core breadcrumb component and customize it as per our requirement.
In your case , you can use the Delegation Pattern for Sling Models

Using above you can modify your breadcrumb component sling model to serve breadcrumb items as per your business logic.
Or if you want to render breadcrumb at client side, you can use Sling model exporter with above approach to achieve the same.

[arunpatidar]

Hi @Rajumuddana 
Please avoid implementing this on the backend, as the page will be cached after generation and served to all customers, resulting in the same experience for everyone. Instead, handle this client-side to create a breadcrumb tailored to each user's journey.

To generate a breadcrumb dynamically on the frontend using JavaScript without causing a flickering effect, you can follow these steps:

1. Start with a minimal placeholder generated server side in the HTML where the breadcrumb will be rendered. This ensures that the layout is stable even before the breadcrumb is fully generated.

2. Apply some basic CSS to prevent layout shifts while the breadcrumb is loading.

3. Manipulating the DOM as soon as breadcrumb ready to display. This reduces the chance of flickering.

Please check EDS examples where breadcrumb is generated client-side.

https://experienceleague.adobe.com/en/docs/experience-manager-edge-delivery/using/other/developer/br...