What is the most effective method for incorporating multi-line breadcrumb links in a React application?

Question

What is the most effective method for incorporating multi-line breadcrumb links in a React application?

I am currently working on implementing a multiline breadcrumb link feature for mobile and tablet devices. As users navigate through multiple folders, I need to handle scenarios where the number of links exceeds the maximum allowed in the breadcrumb container. In such cases, I want to prioritize displaying the path from the current location onward. Despite my efforts, I have not been able to find a CSS solution that fits this requirement. Below is an example with max lines = 2:

current path = 
path1 / path2 
/ path3 / path4
/path5

In the above scenario, the path exceeds max lines at 'path5' and requires modification as follows:

updated path = 
.../ path2 
/ path3 / path4

If the user navigates back, the displayed path should update accordingly without ellipses. I've attempted various methods but none have met my expectations:

An attempt at clamping to max lines using CSS - unsuccessful due to difficulties in determining which links to trim.
The use of white-space: no wrap and text-overflow: ellipse was considered, but multiline support remains a challenge.
An exploration into calculating maximum characters per line based on width and font size yielded some results, yet determining the font constant has proven elusive.

I have managed to dynamically adjust width and font size, but the elusive font constant continues to pose a challenge. Any assistance in resolving these issues would be greatly appreciated.

javascript html css reactjs

Answer 1

Answer №1

I have implemented a demo component showcasing a unique strategy that I believe will be beneficial.
The approach taken includes:

Calculating the number of lines by dividing the wrapper's height by the line height
Removing items from the beginning until the total number of lines meets the maximum allowed limit

Breadcrumbs.js

import { createRef, useEffect, useState } from "react";
import "./Breadcrumbs.css";

function Breadcrumbs() {

    const wrapper = createRef();
    const ellipsis = createRef();
    const [items, setItems] = useState([]);
    const [dropped, setDropped] = useState(false);

    const countLines = (element, lineHeight) => {
        let height = element.offsetHeight;
        let lines = height / lineHeight;
        return Math.round(lines);
    }

    useEffect(() => {
        setItems(window.location.pathname.split("/").filter((e) => e.length > 0))
    }, [window.location.pathname])

    useEffect(() => {
        const lines = countLines(wrapper.current, ellipsis.current.clientHeight);
        const maxLines = 2;

        if (lines > maxLines) {
            setItems(items.slice(1));
            setDropped(true);
        }
    }, [items])

    return <nav className="breadcrumbs-wrapper" ref={wrapper}>
        <span ref={ellipsis}>
            {dropped ? "..." : ""}
        </span>
        {items.map((item, index) => {
            return <span key={index.toString()}>
                <span>&nbsp;/&nbsp;</span>
                <a href="#">{item}</a>
            </span>
        })}
    </nav>
}

export default Breadcrumbs;

Breadcrumbs.css

.breadcrumbs-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

View screenshots of the live example below

https://i.sstatic.net/oa5wf.png

https://i.sstatic.net/mfzNg.png

https://i.sstatic.net/splfX.png

Answer 2

I have implemented a demo component showcasing a unique strategy that I believe will be beneficial.
The approach taken includes:

Calculating the number of lines by dividing the wrapper's height by the line height
Removing items from the beginning until the total number of lines meets the maximum allowed limit

Breadcrumbs.js

import { createRef, useEffect, useState } from "react";
import "./Breadcrumbs.css";

function Breadcrumbs() {

    const wrapper = createRef();
    const ellipsis = createRef();
    const [items, setItems] = useState([]);
    const [dropped, setDropped] = useState(false);

    const countLines = (element, lineHeight) => {
        let height = element.offsetHeight;
        let lines = height / lineHeight;
        return Math.round(lines);
    }

    useEffect(() => {
        setItems(window.location.pathname.split("/").filter((e) => e.length > 0))
    }, [window.location.pathname])

    useEffect(() => {
        const lines = countLines(wrapper.current, ellipsis.current.clientHeight);
        const maxLines = 2;

        if (lines > maxLines) {
            setItems(items.slice(1));
            setDropped(true);
        }
    }, [items])

    return <nav className="breadcrumbs-wrapper" ref={wrapper}>
        <span ref={ellipsis}>
            {dropped ? "..." : ""}
        </span>
        {items.map((item, index) => {
            return <span key={index.toString()}>
                <span>&nbsp;/&nbsp;</span>
                <a href="#">{item}</a>
            </span>
        })}
    </nav>
}

export default Breadcrumbs;

Breadcrumbs.css

.breadcrumbs-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

View screenshots of the live example below

https://i.sstatic.net/oa5wf.png

https://i.sstatic.net/mfzNg.png

https://i.sstatic.net/splfX.png

Answer 3

Answer №2

import React from 'react'; import { Link, useLocation } from 'react-router-dom';

const Breadcrumb = ({ handleDrawerOpen, open }) => {
   const { pathname } = useLocation();

   const pathString = (paths, index) => {
      return paths.filter((pathItem, pathIndex) => pathIndex !== 0 && pathIndex <= index).join('/');
   };
   
   const generateBreadcrumbs = () => {
      const pathsArray = pathname.split('/');
      return pathsArray.map(
         (pathItem, index) =>
            index !== 0 && (
               <Link
                  style={{
                     textDecoration: 'none',
                     color: index === pathsArray.length - 1 ? '#49C5B6' : 'white',
                  }}
                  to={`/${pathString(pathsArray, index)}`}>{`${
                  pathItem?.charAt(0)?.toUpperCase() + pathItem.slice(1).toLowerCase()
               } ${index !== pathsArray.length - 1 ? '>' : ''} `}</Link>
            )
      );
   };
   return (
      <Box>
         {!open && (
            <IconButton onClick={handleDrawerOpen}>
               <MenuIcon />
            </IconButton>
         )}

         <Profile />
      </Box>
   );
};

export default Breadcrumb;

Answer 4

import React from 'react'; import { Link, useLocation } from 'react-router-dom';

const Breadcrumb = ({ handleDrawerOpen, open }) => {
   const { pathname } = useLocation();

   const pathString = (paths, index) => {
      return paths.filter((pathItem, pathIndex) => pathIndex !== 0 && pathIndex <= index).join('/');
   };
   
   const generateBreadcrumbs = () => {
      const pathsArray = pathname.split('/');
      return pathsArray.map(
         (pathItem, index) =>
            index !== 0 && (
               <Link
                  style={{
                     textDecoration: 'none',
                     color: index === pathsArray.length - 1 ? '#49C5B6' : 'white',
                  }}
                  to={`/${pathString(pathsArray, index)}`}>{`${
                  pathItem?.charAt(0)?.toUpperCase() + pathItem.slice(1).toLowerCase()
               } ${index !== pathsArray.length - 1 ? '>' : ''} `}</Link>
            )
      );
   };
   return (
      <Box>
         {!open && (
            <IconButton onClick={handleDrawerOpen}>
               <MenuIcon />
            </IconButton>
         )}

         <Profile />
      </Box>
   );
};

export default Breadcrumb;

Answer 5

Answer №3

To display the last 5 items as links, you can slice the breadcrumbs array and then map through them:

breadcrumbs.slice(-5).map((breadcrumb, index) => (
<React.Fragment key={index}>
  {index !== 0 && breadcrumbs.length > 1 ? ' / ' : ''}
  {index === 0 && breadcrumb.path !== breadcrumbs[0].path ? (
    '...'
  ) : (
    <a href={breadcrumb.link}>{breadcrumb.path}</a>
  )}
  {index % 2 ? <br /> : ''}
</React.Fragment>

For a visual representation of this solution, check out this demo.

Answer 6

To display the last 5 items as links, you can slice the breadcrumbs array and then map through them:

breadcrumbs.slice(-5).map((breadcrumb, index) => (
<React.Fragment key={index}>
  {index !== 0 && breadcrumbs.length > 1 ? ' / ' : ''}
  {index === 0 && breadcrumb.path !== breadcrumbs[0].path ? (
    '...'
  ) : (
    <a href={breadcrumb.link}>{breadcrumb.path}</a>
  )}
  {index % 2 ? <br /> : ''}
</React.Fragment>

For a visual representation of this solution, check out this demo.

What is the most effective method for incorporating multi-line breadcrumb links in a React application?

Answer №1

Answer №2

Answer №3

Similar questions

Transmit information to a specific route through Express JS while simultaneously serving a static file for React-Router

What is the significance of h being undefined?

Background of jQuery-UI Slider

callback triggering state change

Having trouble getting $.ajax to function properly in conjunction with fullcalendar js?

Replicating a row in a table without disrupting a button within the row

Issues with IE9's CSS hover functionality are causing problems

Is there a way to reach the redux store from an action creator?

Is JavaScript responsible for creating threads for non-blocking AJAX requests?

The code for the bouncing image isn't functioning properly outside of the JSFiddle environment

Persist in the face of a mishap in javascript

Encountering the issue of "Unknown provider" while injecting Angular modules

Show divs in identical position when clicking

Check for my variable in the redux state before proceeding

What is the best way to test a route using nock and request-promise when the URL includes single quotes?

The React MUI Tree only shows updates when the user clicks on a child item

What might be the reason for jQuery not functioning in Internet Explorer 11?

Generating a highchart by retrieving JSON data using AJAX

What are some techniques for transforming text into JSON format?

When attempting to push `content[i]` into an array in AngularJS, it is flagged