Tips for ensuring that Breadcrumbs are displayed properly with the noWrap feature

Question

Tips for ensuring that Breadcrumbs are displayed properly with the noWrap feature

I am currently working on making the MUI component Breadcrumbs responsive.

The issue I am facing is that when the Breadcrumbs component fills up all available space, the items shrink and use ellipsis like a Typography component with the noWrap property set.

While I am aware of the itemsBeforeCollapse, itemsAfterCollapse, and maxItems props, these properties are related to the number of items compared to viewport size rather than the width of each individual item.

I have attempted setting the noWrap property on both the Typography and Link components (since Link extends Typography props), but unfortunately the ellipsis does not display and the Link or Typography component does not shrink as expected.

<Breadcrumbs>
  {links.map((link, i) =>
    i !== links.length - 1 ? (
      <Link
        key={i}
        underline={'hover'}
        noWrap
      >
        {link}
      </Link>
    ) : (
      <Typography noWrap key={i}>
        {link}
      </Typography>
    ),
  )}
</Breadcrumbs>

If you want to see the issue in action, you can view this codeSandbox:

https://codesandbox.io/s/basicbreadcrumbs-material-demo-forked-vio1d?fontsize=14&hidenavigation=1&theme=dark

css reactjs responsive-design material-ui emotion

Answer 1

Answer №1

It seems like the issue you're facing is that the noWrap style isn't affecting the correct element.

But why is this happening?

The noWrap style only affects elements with a width limitation, either explicitly set (e.g. width: 100px) or implicitly by its parent's width.

In your scenario, the Link and the Typography elements do not have limited widths.

So what can you do to fix it?

When Breadcrumbs renders an ol with display: flex, you can make the children (li) stand in a line and take up space by assigning them flex: 1. Then, you can apply ellipsis styles to the li elements.

How do you achieve this? There are multiple methods outlined in the CSS section.

I suggest using the styled approach, which would look something like this:

// JavaScript code snippet here...

Check out this CodeSandbox link for a demo.

Answer 2

It seems like the issue you're facing is that the noWrap style isn't affecting the correct element.

But why is this happening?

The noWrap style only affects elements with a width limitation, either explicitly set (e.g. width: 100px) or implicitly by its parent's width.

In your scenario, the Link and the Typography elements do not have limited widths.

So what can you do to fix it?

When Breadcrumbs renders an ol with display: flex, you can make the children (li) stand in a line and take up space by assigning them flex: 1. Then, you can apply ellipsis styles to the li elements.

How do you achieve this? There are multiple methods outlined in the CSS section.

I suggest using the styled approach, which would look something like this:

// JavaScript code snippet here...

Check out this CodeSandbox link for a demo.

Answer 3

Answer №2

Here is the solution I came up with. Please focus on the StyledBreadcrumbs and sx within the <Breadcrumbs>.

This code reduces the size of all items except the last one. If you want to reduce the size of the last item, simply delete :not(:last-of-type) from one of the style selectors.

import type { ReactElement } from 'react';
import type { BreadcrumbsProps } from '@mui/material';

import React, { MouseEventHandler } from 'react';
import { Link, Breadcrumbs as MUIBreadcrumbs, Typography, styled } from '@mui/material';

const StyledBreadcrumbs = styled(MUIBreadcrumbs)({
    maxWidth: '100%',
    '.MuiBreadcrumbs-ol': {
        flexWrap: 'nowrap'
    },
    '.MuiBreadcrumbs-separator': {
        flexShrink: 0
    },
    '.MuiBreadcrumbs-li:not(:last-of-type)': {
        overflow: 'hidden'
    }
});

export type Breadcrumb = {
    text: React.ReactNode;
    href?: string;
    onClick?: MouseEventHandler<HTMLAnchorElement>;
};

type Props = {
    breadcrumbs: Breadcrumb[];
} & Omit<BreadcrumbsProps, 'children'>;

export function Breadcrumbs({ breadcrumbs, ...props }: Props): ReactElement {
    return <StyledBreadcrumbs {...props}>
        {breadcrumbs.map(({ text, href, onClick }, index) => {

            const sx = index === breadcrumbs.length - 1 ? {} : {
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap'
            };

            if (href || onClick) {
                return (
                    <Link key={index} color='inherit' href={href} onClick={onClick} sx={sx}>
                        {text}
                    </Link>
                );
            }

            return (
                <Typography key={index} color='inherit' sx={sx}>
                    {text}
                </Typography>
            );
        })}
    </StyledBreadcrumbs>;
}

Answer 4

Here is the solution I came up with. Please focus on the StyledBreadcrumbs and sx within the <Breadcrumbs>.

This code reduces the size of all items except the last one. If you want to reduce the size of the last item, simply delete :not(:last-of-type) from one of the style selectors.

import type { ReactElement } from 'react';
import type { BreadcrumbsProps } from '@mui/material';

import React, { MouseEventHandler } from 'react';
import { Link, Breadcrumbs as MUIBreadcrumbs, Typography, styled } from '@mui/material';

const StyledBreadcrumbs = styled(MUIBreadcrumbs)({
    maxWidth: '100%',
    '.MuiBreadcrumbs-ol': {
        flexWrap: 'nowrap'
    },
    '.MuiBreadcrumbs-separator': {
        flexShrink: 0
    },
    '.MuiBreadcrumbs-li:not(:last-of-type)': {
        overflow: 'hidden'
    }
});

export type Breadcrumb = {
    text: React.ReactNode;
    href?: string;
    onClick?: MouseEventHandler<HTMLAnchorElement>;
};

type Props = {
    breadcrumbs: Breadcrumb[];
} & Omit<BreadcrumbsProps, 'children'>;

export function Breadcrumbs({ breadcrumbs, ...props }: Props): ReactElement {
    return <StyledBreadcrumbs {...props}>
        {breadcrumbs.map(({ text, href, onClick }, index) => {

            const sx = index === breadcrumbs.length - 1 ? {} : {
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap'
            };

            if (href || onClick) {
                return (
                    <Link key={index} color='inherit' href={href} onClick={onClick} sx={sx}>
                        {text}
                    </Link>
                );
            }

            return (
                <Typography key={index} color='inherit' sx={sx}>
                    {text}
                </Typography>
            );
        })}
    </StyledBreadcrumbs>;
}

Tips for ensuring that Breadcrumbs are displayed properly with the noWrap feature

Answer №1

Answer №2

Similar questions

Encountering an issue while trying to deploy my Next JS project on my local machine

When attempting to pass data to another page by clicking on a row, the result is that the data appears to be empty

The Material UI library is signaling that there is an unidentified property called `selectable` being used with the <table> tag

Execute the component function located within one page using another page

Issue with mix-blend-mode causing text to not show up on top of the gradient

Whenever I include an onClick event to a div element, the entire webpage fails to display

Utilizing REACT to dynamically load multiple HTML elements

Locate specific phrases within the text and conceal the corresponding lines

Can someone explain why formik forms do not function within material-ui components?

Tips for effectively utilizing the display: inline property in conjunction with ng-repeat

The efficiency of React Context API's setters is remarkably sluggish

Are all React libraries compatible with Node.js when requiring them?

NPM performance lagging on Windows 10

In search of a resolution for the error message "multipart: NextPart: bufio: buffer full" while attempting to upload an image via a fetch post request. Can anyone provide guidance

How do I adjust the ul size to be proportionate to the header?

Close the Material UI ClickAwayListener when clicking on the component itself

Achieving bottom alignment for an element within a flex item: steps for success

Looking to create circular text using HTML, CSS, or JavaScript?

Issues with Google Chrome truncating the end of lengthy pages

What advantages can be gained from having multiple package.json files within a single application?