Breadcrumb

Problem

Users deep in nested views have no sense of where they are in the application hierarchy or how to navigate back up levels. They rely solely on browser back buttons, which may skip intermediate levels or take them completely out of the current section.

Solution

Build the breadcrumb trail from the current route path, showing each level from root to current page with clickable links. This gives users a visual map of where they are and direct navigation to any parent level in the hierarchy.

Example

This example shows how to generate breadcrumb navigation by parsing the current URL path into a hierarchical trail of clickable links.

// For URL: /products/electronics/phones
// Split the pathname and filter out empty segments
const path = location.pathname.split('/').filter(Boolean);

// Build breadcrumb data structure with labels and full paths
const breadcrumbs = path.map((segment, index) => ({
  label: segment,
  // Build the full path by joining segments from root to current level
  path: '/' + path.slice(0, index + 1).join('/')
}));

// Result: hierarchical navigation trail
// [
//   { label: 'products', path: '/products' },
//   { label: 'electronics', path: '/products/electronics' },
//   { label: 'phones', path: '/products/electronics/phones' }
// ]

Benefits

• Provides clear context about user’s location in the application hierarchy.
• Offers direct navigation to parent levels without relying on browser back button.
• Improves discoverability by showing the full path to the current page.
• Helps users understand the information architecture of the application.
• Reduces confusion when navigating deep nested structures.

Tradeoffs

• Takes up vertical space that could be used for content.
• Can become unwieldy with very deep navigation hierarchies.
• Requires route configuration or metadata to generate meaningful labels.
• May duplicate functionality with other navigation elements like sidebars.
• Mobile implementations need careful consideration due to limited space.