Implement Breadcrumb Navigation on the Item Page

Context: Currently, users navigating through the ARIS Portal may face challenges in understanding their position within the platform's structure, especially when moving through multiple layers of information. Implementing breadcrumb navigation on the Item page will significantly improve the user experience by providing a clear path back to previous sections or categories.

1. What is Breadcrumb Navigation?

• Breadcrumbs are a secondary navigation tool that displays the user’s location within a website or application in a hierarchical manner.

• Each breadcrumb typically represents a clickable link, allowing the user to easily navigate back to higher-level pages or categories.

• For example, a breadcrumb trail for an item page could look like this:
  Home > Category > Subcategory > Item Name

2. Current Problem:

• When users land on any Item page, it can be difficult to know where they are in the overall structure without returning to the main menu or starting the navigation process from scratch.

• This leads to inefficiency, especially when users need to go back to previous sections or switch between different categories.

3. Proposed Solution:

• Implement Breadcrumb Navigation at the top of the Item page to provide users with a visual hierarchy of their current location within the system. This breadcrumb trail should:

  • Show the path from the homepage (or relevant higher-level page) to the current item.

  • Each section in the breadcrumb should be clickable, allowing users to navigate back to any previous section in the hierarchy without reloading pages unnecessarily or losing their current work.

4. Detailed Functionality:

• Dynamic Path Construction: The breadcrumb should dynamically generate based on the path a user took to arrive at the current item. include only Diagram tab for the navigation to avoid other tabs navigation being pulled in the navigation path

• Highlight Current Page: The last breadcrumb (representing the current item) should be highlighted but non-clickable, indicating the user's current position without offering an option to click (since they are already on that page).

• Responsive Design: The breadcrumb navigation should be responsive and adapt to different screen sizes, ensuring it is visible on both desktop and mobile views.

5. User Experience Benefits:

• Improved Navigation Efficiency: Users can easily backtrack to previous sections without using the browser’s back button or returning to the main menu, saving time and reducing confusion.

• Enhanced Context Awareness: The breadcrumb trail helps users understand their location in the system’s hierarchy, making it easier to know how the current item fits within the broader structure.

• Reduced Clicks: Instead of multiple clicks to return to the main section, users can go back to any previous level with a single click, streamlining navigation.

6. Design Considerations:

• Visual Clarity: Ensure that the breadcrumb navigation is visually distinct and placed at the top of the item page, typically above the content and below the header. The links should be easily readable and intuitive.

• Separator Style: Use clear separators (e.g., > or /) between breadcrumb levels to maintain a clean and structured look.

• Long Breadcrumbs: If the breadcrumb path is long, consider implementing a collapsible design or truncating the middle portion, while keeping the starting point (Home) and the current item visible.

Summary of Requested Changes:

1. Implement breadcrumb navigation on the Item page to show the user’s position in the system hierarchy.

2. Ensure each breadcrumb level is clickable Diagram Tab link, allowing users to easily navigate back to previous Diagram they were on.

3. This feature will improve navigation efficiency, enhance context awareness, and reduce user frustration when moving between different levels in the platform.

Thanks,

Prathibaa