fix(breadcrumbs): make breadcrumbs visible on mobile viewports (#111)

Author: rodrigosdev

.changeset/breadcrumbs-mobile-visibility.md

@@ -0,0 +1,7 @@
+---
+"@cloudflare/kumo": patch
+---
+
+fix(breadcrumbs): improve mobile breadcrumb readability
+
+breadcrumbs now render a compact mobile trail for deeper hierarchies by collapsing early levels to `...` and keeping the trailing path visible. labels in breadcrumb links and the current page now truncate correctly to prevent stacking or overlap on narrow viewports.

.changeset/sparkly-words-strive.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+fix(breadcrumbs): enhance mobile breadcrumb display for better readability

packages/kumo/src/components/breadcrumbs/breadcrumbs.tsx

@@ -1,4 +1,13 @@
-import { useEffect, useState, type PropsWithChildren } from "react";
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useState,
+  type PropsWithChildren,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
 import { Button } from "../../components/button";
 import { SkeletonLine } from "../../components/loader/skeleton-line";
@@ -39,7 +48,7 @@ export function breadcrumbsVariants({
   size = KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size,
 }: KumoBreadcrumbsVariantsProps = {}) {
   return cn(
-    "group mr-4 hidden min-w-0 grow items-center sm:flex",
+    "group mr-4 flex min-w-0 grow items-center overflow-hidden whitespace-nowrap",
     KUMO_BREADCRUMBS_VARIANTS.size[size].classes,
   );
 }
@@ -59,10 +68,10 @@ const Link = ({
   return (
     <LinkComponent
       to={href}
-      className="flex min-w-0 items-center gap-1 text-kumo-subtle no-underline"
+      className="flex min-w-0 max-w-full items-center gap-1 text-kumo-subtle no-underline"
     >
       {!!icon && <span className="flex shrink-0 items-center">{icon}</span>}
-      {children}
+      <span className="truncate">{children}</span>
     </LinkComponent>
   );
 };
@@ -88,18 +97,21 @@ function Current({
 
   return (
     <div
-      className="flex items-center gap-1 truncate font-medium"
+      className="flex min-w-0 max-w-full items-center gap-1 font-medium"
       aria-current="page"
     >
       {icon && <span className="flex shrink-0 items-center">{icon}</span>}
-      {children}
+      <span className="truncate">{children}</span>
     </div>
   );
 }
 
 function Separator() {
   return (
-    <span className="flex items-center text-kumo-inactive" aria-hidden="true">
+    <span
+      className="flex shrink-0 items-center text-kumo-inactive"
+      aria-hidden="true"
+    >
       <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
         <path
           stroke="currentColor"
@@ -113,6 +125,14 @@ function Separator() {
   );
 }
 
+function MobileEllipsis() {
+  return (
+    <span className="flex shrink-0 items-center text-kumo-subtle" aria-hidden>
+      ...
+    </span>
+  );
+}
+
 function Clipboard({ text }: { text: string }) {
   const [isCopied, setIsCopied] = useState(false);
 
@@ -192,16 +212,56 @@ export function Breadcrumb({
   size = "base",
   className,
 }: BreadcrumbsProps) {
+  const childArray = Children.toArray(children);
+  const mobileChildren = getMobileBreadcrumbChildren(childArray);
+
   return (
     <nav
       className={cn(breadcrumbsVariants({ size }), className)}
       aria-label="breadcrumb"
     >
-      {children}
+      <div className="contents sm:hidden">{mobileChildren}</div>
+      <div className="hidden sm:contents">{childArray}</div>
     </nav>
   );
 }
 
+function isComponentElement(
+  child: ReactNode,
+  component: unknown,
+): child is ReactElement {
+  return isValidElement(child) && child.type === component;
+}
+
+function getMobileBreadcrumbChildren(children: ReactNode[]): ReactNode[] {
+  const breadcrumbItems = children.filter(
+    (child) =>
+      isComponentElement(child, Link) || isComponentElement(child, Current),
+  ) as ReactElement[];
+
+  if (breadcrumbItems.length <= 2) {
+    return children;
+  }
+
+  const [parentItem, currentItem] = breadcrumbItems.slice(-2);
+  const trailingItems: ReactNode[] = [
+    <MobileEllipsis key="kumo-breadcrumb-mobile-ellipsis" />,
+    <Separator key="kumo-breadcrumb-mobile-separator-leading" />,
+    cloneElement(parentItem, { key: "kumo-breadcrumb-mobile-parent" }),
+    <Separator key="kumo-breadcrumb-mobile-separator-trailing" />,
+    cloneElement(currentItem, { key: "kumo-breadcrumb-mobile-current" }),
+  ];
+
+  const extras = children.filter(
+    (child) =>
+      !isComponentElement(child, Link) &&
+      !isComponentElement(child, Current) &&
+      !isComponentElement(child, Separator),
+  );
+
+  return [...trailingItems, ...extras];
+}
+
 Breadcrumb.Link = Link;
 Breadcrumb.Current = Current;
 Breadcrumb.Separator = Separator;