How to show 'navigation item links' in Breadcrumb based on user journey? | Community
Skip to main content
R
Rajumuddana
Level 4
August 27, 2024
Solved

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

  • August 27, 2024
  • 4 replies
  • 1085 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Pradeep_Kumar_Srivastav

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.

4 replies

Pradeep_Kumar_Srivastav
Community Advisor
Pradeep_Kumar_SrivastavCommunity AdvisorAccepted solution
Community Advisor
August 27, 2024

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.
    A
    Anonymous
    August 27, 2024

    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
      Community Advisor
      pulkitvashisthCommunity Advisor
      Community Advisor
      August 27, 2024

      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
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        August 27, 2024

        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/breadcrumbs 

        Arun Patidar
          Terms & ConditionsAccessibility statement

          Loading footer...