Breadcrumb

Description: The Breadcrumb component provides navigation links that show the user's current location within a website. It supports custom icons, labels, mobile views, and automatically truncates the links when there are more than four, displaying an ellipsis (....) in the middle.

Usage:

import React from 'react';
import Breadcrumb from 'blendx-ui/Breadcrumb';

const links = [
  { label: 'Home', icon: 'home-icon', url: '/' },
  { label: 'Library', icon: 'book-icon', url: '/library' },
  { label: 'Data', icon: 'data-icon', url: '/library/data' },
  { label: 'Current Page', icon: 'current-page-icon', url: '/library/data/current' },
];

const MyBreadcrumb = () => (
  <Breadcrumb 
    links={links} 
    ariaLabel="breadcrumb"
    variant="light"
  />
);

export default MyBreadcrumb;

Props:

links (array, required): An array of objects describing the links to be rendered. Each object should contain:
- icon (string): The class name of the icon to display next to the label.
- label (string, required): The text to display for the link.
- url (string): The URL to navigate to when the link is clicked.
Note: If there are more than four links, the breadcrumb will truncate the middle links and display an ellipsis (....).
activeLabel (string): A label that is not a link and is placed at the end of the breadcrumb.
ariaLabel (string): Accessibility label for the breadcrumb navigation (default: 'breadcrumb').
spacer (element): Custom element to place between breadcrumb items (default: > rendered with an Icon component).
clickHandler (func): A function to handle the onClick event for a breadcrumb link, useful for analytics.
variant (string): The visual style of the breadcrumb (options: light, dark; default: light).
isMobile (bool): Adjusts the breadcrumb for mobile view by showing only the last link (default: false).
linkAs (elementType): The element type to use when rendering links, typically 'a' or a router Link component (default: 'a').

Example:

import { Link } from 'react-router-dom';

const links = [
  { label: 'Home', icon: 'home-icon', url: '/' },
  { label: 'Category', icon: 'category-icon', url: '/category' },
  { label: 'Subcategory', icon: 'subcategory-icon', url: '/category/subcategory' },
  { label: 'Product', icon: 'product-icon', url: '/category/subcategory/product' },
  { label: 'Details', icon: 'details-icon', url: '/category/subcategory/product/details' },
];

<Breadcrumb 
  links={links} 
  spacer={<span>/</span>} 
  variant="dark" 
  isMobile={true} 
  linkAs={Link}
/>

In this example, since there are more than four links, the breadcrumb would show something like: Home / Category / .... / Product / Details

Breadcrumb​

Breadcrumb