function Breadcrumbs({
  items,
  onSelectItem,
  renderItem = defaultRenderItem,
}) {
  if (!items.length) {
    return null;
  }
  const breadcrumbs = items.slice(0, -1);
  const currentItem = items[items.length - 1];
  return (
    <ul className="Breadcrumbs hyp-u-layout-row">
      {breadcrumbs.map((item, idx) => (
        <li className="Breadcrumbs__item Breadcrumbs__item--path" key={idx}>
          <LinkButton onClick={() => onSelectItem(item)}>
            {renderItem(item)}
          </LinkButton>
          <span className="Breadcrumbs__divider">›</span>
        </li>
      ))}
      <li className="Breadcrumbs__item Breadcrumbs__item--current">
        <LinkButton disabled>{renderItem(currentItem)}</LinkButton>
      </li>
    </ul>
  );
}
/**
 * Render a collection of breadcrumbs. All but the last breadcrumb is clickable,
 * and will invoke the `onSelectItem` when clicked.
 *
 * @template Item
 * @param {BreadcrumbProps<Item>} props
 */
Render a collection of breadcrumbs. All but the last breadcrumb is clickable,
and will invoke the `onSelectItem` when clicked.

@template Item
@param {BreadcrumbProps} props
Render a collection of breadcrumbs . All but the last breadcrumb is clickable and will invoke the ` onSelectItem ` when clicked . @template Item @param { BreadcrumbProps } props
function Breadcrumbs({
  items,
  onSelectItem,
  renderItem = defaultRenderItem,
}) {
  if (!items.length) {
    return null;
  }
  const breadcrumbs = items.slice(0, -1);
  const currentItem = items[items.length - 1];
  return (
    <ul className="Breadcrumbs hyp-u-layout-row">
      {breadcrumbs.map((item, idx) => (
        <li className="Breadcrumbs__item Breadcrumbs__item--path" key={idx}>
          <LinkButton onClick={() => onSelectItem(item)}>
            {renderItem(item)}
          </LinkButton>
          <span className="Breadcrumbs__divider">›</span>
        </li>
      ))}
      <li className="Breadcrumbs__item Breadcrumbs__item--current">
        <LinkButton disabled>{renderItem(currentItem)}</LinkButton>
      </li>
    </ul>
  );
}
function Breadcrumbs ( { items , onSelectItem , renderItem = defaultRenderItem , } ) { if ( ! items . length ) { return null ; } const breadcrumbs = items . slice ( 0 , - 1 ) ; const currentItem = items [ items . length - 1 ] ; return ( < ul className = "Breadcrumbs hyp-u-layout-row" > { breadcrumbs . map ( ( item , idx ) => ( < li className = "Breadcrumbs__item Breadcrumbs__item--path" key = { idx } > < LinkButton onClick = { ( ) => onSelectItem ( item ) } > { renderItem ( item ) } < / LinkButton > < span className = "Breadcrumbs__divider" > ›</ s p an> < / li > ) ) } < li className = "Breadcrumbs__item Breadcrumbs__item--current" > < LinkButton disabled > { renderItem ( currentItem ) } < / LinkButton > < / li > < / ul > ) ; }
Render a collection of breadcrumbs.
Render a collection of breadcrumbs .