[breadcrumbs] Support for leading separator (/)

Summary

I would be grateful to see a new prop for <Breadcrumbs>, namely, showLeadingSeparator, or however you want to call it so that, the default breadcrumbs behaviour would include a leading / like here:

My workaround is to add prepend an empty string "" to the pathSegments like:

const pathSegments = showHome
    ? ["#", ...pathname.split("/").filter(Boolean)]
    : ["", ...pathname.split("/").filter(Boolean)];

  const renderBreadcrumbItem = (value, to, index) => {
  // SNIP
  };

  return (
    <Breadcrumbs aria-label="breadcrumb" maxItems={isMdUp ? 8 : 2}>
      {pathSegments.map((value, index) => {
        const to =
          showHome && index === 0
            ? "/dashboard"
            : `/${pathSegments.slice(1, index + 1).join("/")}`;
        return renderBreadcrumbItem(value, to, index);
      })}
    </Breadcrumbs>
  );
};

As you can clearly see this workaround is leading to issues with v-align and is not very DX. Adding the suggested prop would solve this.

Examples

No response

Motivation

No response

Search keywords: breadcrumb, home, /

Start at the Breadcrumbs component entry point and review how its children and separators are rendered. Use the reported leading-separator behavior and the supplied workaround as the acceptance target, then check the component's existing tests if available to verify the new prop without affecting default behavior.