Add menu support to folder-contents breadcrumb for long navigation titles

packages/components/src/components/icons/SlashIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Icon } from '../Icon/Icon';
+import type { IconPropsWithoutChildren } from '../Icon/Icon';
+
+export const SlashIcon = (props: IconPropsWithoutChildren) => {
+  return (
+    <Icon {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="36"
+        height="36"
+        viewBox="0 0 36 36"
+      >
+        <polygon fillRule="evenodd" points="23 7 11 29 14 29 26 7" />
+      </svg>
+    </Icon>
+  );
+};

packages/components/src/components/icons/index.ts

@@ -108,3 +108,4 @@ export { WidthFullIcon } from './WidthFullIcon';
 export { WidthLayoutIcon } from './WidthLayoutIcon';
 export { WidthNarrowIcon } from './WidthNarrowIcon';
 export { WorldIcon } from './WorldIcon';
+export { SlashIcon } from './SlashIcon';

packages/volto/package.json

@@ -173,6 +173,7 @@
     "react": "18.2.0",
     "react-anchor-link-smooth-scroll": "1.0.12",
     "react-animate-height": "2.0.17",
+    "react-aria-components": "^1.13.0",
     "react-beautiful-dnd": "13.0.0",
     "react-cookie": "4.1.1",
     "react-dates": "21.5.1",

packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.jsx

@@ -1,74 +1,56 @@
 import React from 'react';
-import { Breadcrumb } from 'semantic-ui-react';
-import { Link } from 'react-router-dom';
-import { defineMessages, useIntl } from 'react-intl';
+import { Breadcrumbs, Breadcrumb, Menu, MenuItem } from '@plone/components';
 import { useSelector } from 'react-redux';
+import { SlashIcon, MoreoptionsIcon } from '@plone/components/Icons';
 import ContentsBreadcrumbsRootItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsRootItem';
 import ContentsBreadcrumbsHomeItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsHomeItem';
 
-const messages = defineMessages({
-  home: {
-    id: 'Home',
-    defaultMessage: 'Home',
-  },
-  root: {
-    id: 'Root',
-    defaultMessage: 'Root',
-  },
-});
-
 const ContentsBreadcrumbs = (props) => {
   const { items } = props;
-  const intl = useIntl();
   const navroot = useSelector((state) => state.navroot.data.navroot);
   const navrootIsPortal = navroot?.['@type'] === 'Plone Site';
+  const inner = items ? items.slice(0, -1) : [];
+  const last = items ? items[items.length - 1] : null;
 
   return (
-    <Breadcrumb>
+    <Breadcrumbs>
       {navrootIsPortal ? (
-        <Link
-          to="/contents"
-          className="section"
-          title={intl.formatMessage(messages.home)}
-        >
+        <Breadcrumb href={'/contents'} separator={<SlashIcon size="sm" />}>
           <ContentsBreadcrumbsHomeItem />
-        </Link>
+        </Breadcrumb>
       ) : (
         <>
-          <Link
-            to="/contents"
-            className="section"
-            title={intl.formatMessage(messages.root)}
-          >
+          <Breadcrumb href={'/contents'} separator={<SlashIcon size="sm" />}>
             <ContentsBreadcrumbsRootItem />
-          </Link>
-          <Breadcrumb.Divider />
-          <Link
-            to={`${navroot?.['@id']}/contents`}
-            className="section"
+          </Breadcrumb>
+          <Breadcrumb
+            href={`${navroot?.['@id']}/contents`}
             title={navroot?.title}
+            separator={<SlashIcon size="sm" />}
           >
             {navroot?.title}
-          </Link>
+          </Breadcrumb>
         </>
       )}
-      {items.map((breadcrumb, index, breadcrumbs) => [
-        <Breadcrumb.Divider key={`divider-${breadcrumb.url}`} />,
-        index < breadcrumbs.length - 1 ? (
-          <Link
-            key={breadcrumb.url}
-            to={`${breadcrumb.url}/contents`}
-            className="section"
+      {inner.length > 0 && (
+        <Breadcrumb separator={<SlashIcon size="sm" />}>
+          <Menu
+            items={inner}
+            button={<MoreoptionsIcon size="sm" />}
+            placement="bottom"
           >
-            {breadcrumb.nav_title || breadcrumb.title}
-          </Link>
-        ) : (
-          <Breadcrumb.Section key={breadcrumb.url} active>
-            {breadcrumb.nav_title || breadcrumb.title}
-          </Breadcrumb.Section>
-        ),
-      ])}
-    </Breadcrumb>
+            {(item) => (
+              <MenuItem id={item.url} href={`${item.url}/contents`}>
+                {item.title}
+              </MenuItem>
+            )}
+          </Menu>
+        </Breadcrumb>
+      )}
+      <Breadcrumb href={last?.url} separator={<SlashIcon size="sm" />}>
+        {last?.title}
+      </Breadcrumb>
+    </Breadcrumbs>
   );
 };
 

packages/volto/src/start-client.jsx

@@ -4,7 +4,9 @@ import React from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { IntlProvider } from 'react-intl-redux';
+import { RouterProvider } from 'react-aria-components';
 import { ConnectedRouter } from 'connected-react-router';
+import { useHistory } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 import { ReduxAsyncConnect } from '@plone/volto/helpers/AsyncConnect';
 import { loadableReady } from '@loadable/component';
@@ -22,6 +24,20 @@ function reactIntlErrorHandler(error) {
   debug('i18n')(error);
 }
 
+function ReactAriaRouterProvider({ children }) {
+  const history = useHistory();
+
+  const navigate = (to, options = {}) => {
+    if (options.replace) {
+      history.replace(to);
+    } else {
+      history.push(to);
+    }
+  };
+
+  return <RouterProvider navigate={navigate}>{children}</RouterProvider>;
+}
+
 export default function client() {
   const api = new Api();
 
@@ -73,9 +89,11 @@ export default function client() {
         <Provider store={store}>
           <IntlProvider onError={reactIntlErrorHandler}>
             <ConnectedRouter history={history}>
-              <ScrollToTop>
-                <ReduxAsyncConnect routes={routes} helpers={api} />
-              </ScrollToTop>
+              <ReactAriaRouterProvider>
+                <ScrollToTop>
+                  <ReduxAsyncConnect routes={routes} helpers={api} />
+                </ScrollToTop>
+              </ReactAriaRouterProvider>
             </ConnectedRouter>
           </IntlProvider>
         </Provider>