Dynamic Infinite Breadcrumbs Navigation for Balance Sheet

Frontend ReactJS
1

1. Objective

  • Objective: The NavBar component provides a dynamic breadcrumb navigation system for the balance sheet application. It ensures users can seamlessly navigate through complex financial hierarchies while preserving query parameters and maintaining a structured user experience.

This component addresses key usability challenges, including:

  • Deep hierarchical navigation for financial data.
  • Dynamic query parameter management for filtering and contextual navigation.
  • Responsive design considerations for usability on different screen sizes

2. Background/Context

  • Navigating financial data often involves drilling down into multiple levels of categories, subcategories, and specific financial entities. A traditional breadcrumb system is inadequate due to:
    • Unpredictable depth of navigation depending on the dataset.
    • The need to maintain search parameters across different levels.
    • The requirement for a seamless user experience without excessive page reloads.
  • The Infinite Breadcrumbs Component dynamically constructs navigation paths based on the URL and enhances usability by preserving relevant filters.

3. Scope

In Scope:

  • Dynamic breadcrumb generation from the URL path
  • Query parameter handling to ensure correct data filtering
  • Responsive text truncation for optimal display on various screen sizes
  • Efficient navigation controls for deep financial structures.

Out of Scope:

  • Backend API interactions
  • Advanced UI animations (possible future enhancement).

4. Approach/Methodology

Dynamic Breadcrumb Generation

The component parses location.pathname and constructs breadcrumbs dynamically:

const [segments, setSegments] = useState(location.pathname.split('/').slice(3));

Benefits:

  • Fully adaptive to any depth of financial hierarchy.
  • Eliminates the need for hardcoded breadcrumb structures.

Navigation & Query Parameter Management

When users interact with breadcrumbs, the component ensures proper navigation while preserving key filters:

let path = generatePath(index, searchParamsCopy);

if (location.pathname === path.split('?')[0]) return;

navigate(path);

Benefits:

  • Prevents unnecessary re-navigation to the same page.
  • Preserves relevant filters while removing outdated parameters.
  • Automatically updates the type parameter based on hierarchy depth.

Intelligent Query Cleanup

As users navigate between levels, outdated query parameters are removed dynamically:

if (index === 3) {

searchParamsCopy.delete('ledger_id');

searchParamsCopy.delete('ay_id');

}

Benefits:

  • Prevents invalid API requests due to outdated parameters.
  • Optimizes performance by ensuring clean query structures.

Responsive Truncation for UX Optimization

To enhance readability, breadcrumb labels adjust based on screen size:

useEffect(() => {

const updateTruncateLength = () => {

if (window.innerWidth < 1536) {

setTruncateLength(7);

} else {

setTruncateLength(18);

}

};

window.addEventListener('resize', updateTruncateLength);

updateTruncateLength();

return () => window.removeEventListener('resize', updateTruncateLength);

}, []);

Benefits:

  • Ensures clear and readable navigation on all devices.
  • Prevents breadcrumb overflow on smaller screens.

Consistent Formatting of Financial Categories

Some financial terms require specific capitalization conventions:

upperCaseSegments.includes(segment.toLowerCase())

? decodeURIComponent(segment.toUpperCase())

: capitalSegments.includes(segment.toLowerCase())

? decodeURIComponent(segment.charAt(0).toUpperCase() + segment.slice(1).toLowerCase())

: decodeURIComponent(segment)

Benefits:

  • Maintains financial terminology consistency.
  • Ensures proper readability and professional UI presentation.

5. Expected Outcome

  • Users can navigate financial statements effortlessly without breaking query contexts.
  • Dynamic breadcrumb updates ensure smooth and efficient navigation.
  • Optimized performance with clean URL structures and efficient state management.

6. Resources Needed

  • React.js (Component Logic)
  • TailwindCSS (Styling)

7. Timeframe

  • Estimated Completion: 1-2 sprints

8. Success Criteria

  • The feature is considered successful if:
    • Breadcrumb navigation works dynamically for any depth.
    • Query parameters persist correctly across navigations.
    • The component remains fast and responsive on all devices.

9. Risks & Mitigations

Risk Mitigation Strategy
Deep navigation paths could slow down performance Use memoization to cache paths
Truncation might cut off essential data Adjust truncation dynamically per screen size
Query parameters may not sync correctly Implement strict dependency tracking in useEffect

10. Findings/Results

  • Upon implementation, we will track:
    • User behavior metrics (frequency of breadcrumb navigation).
    • Performance benchmarks (breadcrumb rendering speed).
    • Edge cases & bug reports (to refine the system).

11. Recommendations & Next Steps

  • If successful, future enhancements may include:
    • Framer Motion integration for smooth UI transitions.
    • Lazy loading optimization for performance improvements.
    • Customization options to support various financial report types.
4 Likes