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

Creating a responsive Material UI Container Component is imperative for ensuring a user

Conceal the content within the body and reveal a uniquely crafted div element using Print CSS

What is the best way to conceal padding designated for invisible scrollbars?

Issue: Invalid element type - Error message displayed when attempting to show the Edit button

What is the best way to make Bootstrap 3 move to a new line when there is not enough space?

Switching Themes in Material-UI Version 5: Facing Compilation Issues While Importing Styles

Feeling puzzled by the concept of CSS Block Formatting Contexts (BFCs)

Incorporate a dropdown menu based on the selection made in another dropdown menu

Problems with implementing media queries in CSS

Enhance your title bar with an eye-catching image

Achieving left text alignment in CSS for an excerpt using the Ultimate Posts Widget on Wordpress

Adjust the initial slider according to the values displayed in the following four sliders

Guide to displaying a progress bar while submitting a form using JavaScript and AJAX

Methods to modify the state of a Modal component beyond the boundaries of a React class

Error with React, key must be unique. What's the issue?

What is the best way to create an impact?

Characters from Font Awesome are invisible on my screen

Adjust the size of a menu by modifying its width

After checking the checkbox to add a class, I then need to remove that class without having to interact with the entire document

React Button Axios: A Primer for Complete Beginners