【Material-UI】Breadcrumbs 中的 Collapsed Breadcrumbs 详解

Material-UI 是 React 中广泛使用的 UI 框架，提供了丰富的组件来帮助开发者创建现代的用户界面。Breadcrumbs（面包屑导航）是其中一个重要的导航组件，用户可以借助它轻松了解当前位置，并快速跳转到其他层级。本文将详细介绍 Material-UI 中的 Collapsed Breadcrumbs 组件，包括其工作原理、使用方法以及在项目中的实际应用场景。

一、Breadcrumbs 组件概述

1. 组件介绍

Breadcrumbs 组件是用户界面中的一种导航方式，显示页面层次结构或路径。通过点击面包屑中的链接，用户可以快速返回到上一层级或其他相关页面。在复杂的 Web 应用中，Breadcrumbs 常常用于提升用户体验，帮助用户在不同页面间导航。

Material-UI 的 Breadcrumbs 提供了灵活的定制能力，允许开发者根据项目需求控制显示的层级、路径以及面包屑的外观和行为。尤其是 maxItems 属性，让面包屑在层级较多时可以进行折叠显示，从而保持界面简洁。

2. Collapsed Breadcrumbs 的作用

当路径层级较多时，显示过多的面包屑会占用较大的页面空间，影响整体布局美观。Collapsed Breadcrumbs 通过折叠中间的层级，只显示首尾的关键节点，让导航保持简洁，同时确保用户能理解完整的层级结构。

二、Collapsed Breadcrumbs 的基本用法

下面是一个使用 Collapsed Breadcrumbs 的代码示例，该示例展示了如何设置 maxItems 属性以实现面包屑的折叠效果。

import * as React from 'react';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';

function handleClick(event) {
  event.preventDefault();
  console.info('You clicked a breadcrumb.');
}

export default function CollapsedBreadcrumbs() {
  return (
    <div role="presentation" onClick={handleClick}>
      <Breadcrumbs maxItems={2} aria-label="breadcrumb">
        <Link underline="hover" color="inherit" href="#">
          Home
        </Link>
        <Link underline="hover" color="inherit" href="#">
          Catalog
        </Link>
        <Link underline="hover" color="inherit" href="#">
          Accessories
        </Link>
        <Link underline="hover" color="inherit" href="#">
          New Collection
        </Link>
        <Typography sx={{ color: 'text.primary' }}>Belts</Typography>
      </Breadcrumbs>
    </div>
  );
}

在这个示例中，我们使用了 Breadcrumbs 组件，并设置了 maxItems 属性为 2，这意味着当面包屑层级超过两个时，系统会自动折叠中间的层级，只显示最前面的 Home 和最后一个 Belts 节点，中间的层级将以省略号的形式展示。

三、Collapsed Breadcrumbs 属性详解

1. maxItems 属性

maxItems 是控制面包屑显示层级的关键属性。当路径层级较多时，可以通过设置 maxItems 属性来控制展示的面包屑个数。中间的层级会自动被折叠成省略号，点击后可以查看所有层级的完整路径。

• 默认值：无折叠，显示所有路径节点。
• 用法：maxItems={2} 表示最多显示 2 个路径节点。

2. aria-label 属性

aria-label 是为了提升组件的可访问性，通常会设置成 "breadcrumb"，这样对于使用屏幕阅读器的用户，能够正确理解面包屑导航的作用，增强用户体验。

3. Typography 和 Link 的组合

在 Breadcrumbs 中，通常会用 Link 来表示可点击的导航路径，而当前所在位置的节点则会用 Typography 组件来标识，确保其不可点击。

例如，Home、Catalog 等路径使用 Link，而 Belts（表示当前所在页面）则用 Typography 来展示。

四、Collapsed Breadcrumbs 的实际应用场景

1. 简化导航路径

当应用程序有较多的页面层级时，Breadcrumbs 的折叠功能可以极大地提升页面的整洁性。例如，在一个复杂的电商网站中，用户可能会从首页进入多个子类目，再到具体的商品页面。通过 Collapsed Breadcrumbs，可以让用户一目了然当前所在位置的同时，避免展示过多的中间层级。

<Breadcrumbs maxItems={3} aria-label="breadcrumb">
  <Link underline="hover" color="inherit" href="#">
    Home
  </Link>
  <Link underline="hover" color="inherit" href="#">
    Men
  </Link>
  <Link underline="hover" color="inherit" href="#">
    Clothing
  </Link>
  <Typography sx={{ color: 'text.primary' }}>Shirts</Typography>
</Breadcrumbs>

此处设置 maxItems={3}，确保只显示前三个路径节点，帮助用户聚焦当前页面。

2. 提高可读性与用户体验

面包屑不仅提供导航功能，还能帮助用户理解当前页面的上下文。在需要快速回到上一级页面时，用户只需点击相应的面包屑，极大地提高了用户体验。

例如，一个博客系统中的文章层级，使用 Breadcrumbs 可以让用户方便地返回到上一级目录，查看更多相关内容。

<Breadcrumbs maxItems={2} aria-label="breadcrumb">
  <Link underline="hover" color="inherit" href="#">
    Home
  </Link>
  <Link underline="hover" color="inherit" href="#">
    Blog
  </Link>
  <Link underline="hover" color="inherit" href="#">
    Tech
  </Link>
  <Typography sx={{ color: 'text.primary' }}>React Components</Typography>
</Breadcrumbs>

当用户阅读某篇技术文章时，Breadcrumbs 能显示他们可以快速回到 Blog 或 Tech 页面，浏览其他文章。

五、注意事项

1. 可访问性

在使用面包屑导航时，确保为每个可点击的路径节点设置合适的 aria-label 和 role 属性。这对需要辅助工具的用户非常重要。设置 aria-label="breadcrumb" 可以让屏幕阅读器正确识别它是导航路径。

2. 样式与交互优化

Material-UI 提供了丰富的样式定制能力，可以通过 sx 属性进一步调整 Breadcrumbs 的外观，例如调整文字颜色、间距等。

<Breadcrumbs maxItems={2} aria-label="breadcrumb" sx={{ color: 'primary.main' }}>
  <Link underline="hover" color="inherit" href="#">
    Home
  </Link>
  <Link underline="hover" color="inherit" href="#">
    Shop
  </Link>
  <Typography sx={{ color: 'text.primary' }}>Details</Typography>
</Breadcrumbs>

3. 用户体验

合理使用 Collapsed Breadcrumbs 可以在页面层级较多的情况下提升用户体验。保持简洁的导航有助于减少用户的认知负担，避免他们在复杂的层级中迷失方向。

六、总结

Material-UI 的 Breadcrumbs 组件提供了一种简单而有效的导航方式，尤其是通过 maxItems 属性可以折叠中间路径节点，保持页面的简洁。开发者可以根据项目需求灵活定制面包屑的显示方式，为用户提供更加友好的导航体验。

推荐：

• JavaScript
• react
• vue

---