glide-design-system/src/lib/components/breadcrumbs/Breadcrumbs.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React, { useEffect, useState } from "react";
import "./breadcrumbs.css";
import { useNavigate } from "react-router-dom";
import PropTypes from "prop-types";

/**
 * Breadcrumbs UI component for navigation paths.
 * @param {React.ElementType} children - The breadcrumb items.
 * @param {string} separator - Separator between breadcrumb items.
 */
export const Breadcrumbs = ({
  children,
  separator,
  className,
  style,
  labelStyle,
  containerStyle,
  iconStyle,
}) => {
  const [options, setOptions] = useState([]);
  const navigate = useNavigate();
  useEffect(() => {
    //changing whether there is array of children or single children and convert to array
    const optionsItems = children instanceof Array ? children : [children];
    const optionsProvided = optionsItems.map((el) => ({
      label: el?.props?.children,
      href: el?.props?.href,
    }));
    setOptions(optionsProvided);
  }, [children]);

  const combinedStyle = {
    ...labelStyle,
  };

  const breadcrumbsCombinedStyle = {
    ...style,
  };

  const breadcrumbsParentCombinedStyle = {
    ...containerStyle,
  };

  const combinedIconStyle = {
    ...iconStyle,
  };

  return (
    <div
      className="breadcrumbsParentContainer"
      style={breadcrumbsParentCombinedStyle}
    >
      {options?.map((el, i) => {
        return (
          <div
            className="breadcrumbs"
            style={breadcrumbsCombinedStyle}
            key={i}
            id={i}
          >
            <div
              onClick={() =>
                i !== options.length - 1 && navigate(`${el?.href}`)
              }
              style={combinedStyle}
              className={
                i === options.length - 1
                  ? `breadcrumbsNthChild breadcrumbsChild ${
                      className ? className : ""
                    }`
                  : `breadcrumbsNonNthChild breadcrumbsChild ${
                      className ? className : ""
                    }`
              }
            >
              {el?.label}
            </div>
            {i !== options.length - 1 &&
              (separator ? (
                <span style={combinedIconStyle} className="breadcrumbsIcon">
                  {separator}
                </span>
              ) : (
                <span style={combinedIconStyle} className="breadcrumbsIcon">
                  &gt;
                </span>
              ))}
          </div>
        );
      })}
    </div>
  );
};

Breadcrumbs.propTypes = {
  separator: PropTypes.string,
};