Refactor BreadcrumbMenuTrigger to use Menu components

- Updated the `MenuTrigger` story in the Breadcrumb component to utilize the new Menu structure, enhancing the integration of menu items within the breadcrumb navigation.
- Replaced the previous `BreadcrumbMenuTrigger` with a more modular approach using `MenuTriggerElement`, `MenuPortal`, and related components, improving the overall composition and flexibility of the breadcrumb UI.

This change aligns with recent updates to the menu components, promoting a more cohesive design across the UI library.

Author: codingwolf-at

packages/propel/src/ui/breadcrumb/breadcrumb.stories.tsx

@@ -2,9 +2,17 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ChevronRight, Layers } from "lucide-react";
 import { expect } from "storybook/test";
 
-import { BreadcrumbMenuTrigger } from "../../components/breadcrumb";
-import { MenuContent } from "../../components/menu";
-import { Menu, MenuItem } from "../menu";
+import {
+  Menu,
+  MenuItem,
+  MenuItemContent,
+  MenuItemTitle,
+  MenuItemTitleRow,
+  MenuPopup,
+  MenuPortal,
+  MenuPositioner,
+  MenuTrigger as MenuTriggerElement,
+} from "../menu";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -18,10 +26,9 @@ import {
 } from "./index";
 
 // UI-tier story: composes the ATOMIC breadcrumb parts (each renders a single element).
-// The components-tier `Breadcrumb` story shows the ready-made menu crumbs (which
-// compose propel's Menu). Here you assemble the raw crumb chrome: the landmark + list, links,
-// the current page, separators, and the bare menu-trigger surface (without an attached menu)
-// with its own leading icon and trailing indicator parts.
+// The components-tier `Breadcrumb` story shows the ready-made menu crumbs. Here you assemble the
+// raw crumb chrome from `ui` atoms: the landmark + list, links, the current page, separators, and
+// a menu-trigger crumb wired to a Base UI `Menu` (its own leading icon and trailing indicator).
 const meta = {
   title: "UI/Breadcrumb",
   component: Breadcrumb,
@@ -92,8 +99,9 @@ const inertAnchor = () => <a href="#" onClick={(event) => event.preventDefault()
 /**
  * A menu-style crumb built from the raw `BreadcrumbTrigger` (`group` adds the open-state marker so
  * the indicator can rotate), composing the atomic `BreadcrumbTriggerIcon` and
- * `BreadcrumbTriggerIndicator` parts. The UI tier styles just the trigger surface — wiring it to a
- * real menu via the `render` prop is a components-tier concern, so no separator follows it.
+ * `BreadcrumbTriggerIndicator` parts. The trigger is projected onto a Base UI `Menu`'s trigger via
+ * `render`, with the menu surface assembled from the `ui` menu atoms. The menu crumb owns its own
+ * chevron, so no separator follows it.
  */
 export const MenuTrigger: Story = {
   render: () => (
@@ -109,18 +117,30 @@ export const MenuTrigger: Story = {
         </BreadcrumbSeparator>
         <BreadcrumbItem>
           <Menu>
-            <BreadcrumbMenuTrigger icon={<Layers />}>Plane Design</BreadcrumbMenuTrigger>
-            <MenuContent>
-              <MenuItem render={inertAnchor()} layout={"default"}>
-                Plane Web
-              </MenuItem>
-              <MenuItem render={inertAnchor()} layout={"default"}>
-                Plane Mobile
-              </MenuItem>
-              <MenuItem render={inertAnchor()} layout={"default"}>
-                Plane Server
-              </MenuItem>
-            </MenuContent>
+            <MenuTriggerElement render={<BreadcrumbTrigger group />}>
+              <BreadcrumbTriggerIcon>
+                <Layers />
+              </BreadcrumbTriggerIcon>
+              Plane Design
+              <BreadcrumbTriggerIndicator>
+                <ChevronRight />
+              </BreadcrumbTriggerIndicator>
+            </MenuTriggerElement>
+            <MenuPortal>
+              <MenuPositioner sideOffset={4}>
+                <MenuPopup elevation="raised">
+                  {["Plane Web", "Plane Mobile", "Plane Server"].map((label) => (
+                    <MenuItem key={label} render={inertAnchor()} layout="default">
+                      <MenuItemContent>
+                        <MenuItemTitleRow>
+                          <MenuItemTitle>{label}</MenuItemTitle>
+                        </MenuItemTitleRow>
+                      </MenuItemContent>
+                    </MenuItem>
+                  ))}
+                </MenuPopup>
+              </MenuPositioner>
+            </MenuPortal>
           </Menu>
         </BreadcrumbItem>
         <BreadcrumbItem>