Skip to main content

Breadcrumb ellipsis menu passes through itemRender (WEB-1044)

Version: 0.4.4 ยท Type: ๐Ÿ› Bug Fix

WEB-1044

Problemโ€‹

When using items + itemRender, visible items correctly call itemRender (allowing callers to return SPA navigation nodes). However, items collapsed into the ... ellipsis menu were rendered entirely inside BreadcrumbEllipsisMenu without calling itemRender, hardcoding them as <a href>. Clicking a collapsed item triggered a full-page browser navigation, inconsistent with the expanded behavior.

Changed Filesโ€‹

  • packages/design/src/components/Breadcrumb/Breadcrumb.tsx

Changesโ€‹

New optional placement field on BreadcrumbItemRenderInfoโ€‹

placement?: 'dropdown';

Carried only when rendering inside the collapsed ellipsis dropdown (value 'dropdown'); omitted (undefined) for inline breadcrumb items. No inline literal is defined โ€” the absent value acts as the inline sentinel, reducing caller cognitive load.

BreadcrumbEllipsisMenu now accepts itemRender and the full resolved item list allItems. For each collapsed item it calls itemRender({ ..., placement: 'dropdown' }) first; it falls back to the default <a href> render only when itemRender returns null or undefined.

Inline itemRender calls continue to omit placement (keeping the default). Callers can distinguish the two contexts with placement === 'dropdown'.

Migration (web4 AskShell)โ€‹

itemRender={({ placement, item }) => {
  if (placement === 'dropdown') {
    // Dropdown: wrap with onClick navigate, no hover styles needed
    return <span onClick={() => navigate({ to: item.href })}>{item.title}</span>;
  }
  // Inline (placement is undefined): original behavior unchanged
  return <Button onClick={() => navigate({ to: item.href })}>{item.title}</Button>;
}}