React MUI面包屑导航

MUI或Material-UI ，它是一个React组件库。它使您能够构建自己的设计系统并更快地开发React应用程序。它基本上是由Google于2014年开发的设计语言。它使用更多的设计和动画、网格系统，并提供阴影和灯光效果。

在React MUI面包屑导航中 ，面包屑包括一个链接列表，帮助用户可视化网站的层次结构中页面的位置，并允许导航到任何其“祖先”。

面包屑类型：

基本面包屑： 默认面包屑。
活动中的最后一个面包屑： 使最后一个面包屑可交互。它显示当前活动的链接。
自定义分隔符： 分隔符用于两个或多个面包屑之间。
带图标的面包屑： 由面包屑描述和图标组成。图标有助于区分它所指的组件。
折叠面包屑： 由可折叠的面包屑组件组成。
自定义样式： 使用自定义样式来自定义面包屑。我们可以添加自定义设计以为面包屑添加样式。
与react-router集成： 面包屑也可以与react-router一起使用。它有助于为我们的应用程序添加额外的功能。
可访问性： 为了更好的可访问性，请确保在面包屑组件中使用有序列表元素来结构化链接集合，并添加aria-label描述。
API： 使用<Breadcrumbs />、<Link />和<Typography /> API创建面包屑导航组件。
创建React项目：

步骤1： 要创建一个React应用程序，您需要通过npm命令安装React模块。

npm create-react-app project name

步骤2: 创建完你的React项目后，进入该文件夹执行不同的操作。

cd project name

步骤3： 创建ReactJS应用程序后，使用以下命令安装所需模块：

npm install @mui/material @emotion/react @emotion/styled

项目结构：

项目结构应该如下所示：

React MUI面包屑导航

运行应用程序的步骤： 打开终端并输入以下命令。

npm start

示例1： 下面的示例演示了使用自定义分隔符的React MUI活动最后导航组件。

import React from "react"; 
import Breadcrumbs from "@mui/material/Breadcrumbs"; 
import Link from "@mui/material/Link"; 
  
function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center",  
                          color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Breadcrumb Navigation</h2> 
            </div> 
            <div style={{ marginLeft: 40 }}> 
                <div> 
                    <Breadcrumbs aria-label="breadcrumb" 
                                 separator="›"> 
                        <Link underline="hover" 
                              color="inherit" 
                              href="/"> 
                            Home 
                        </Link> 
                        <Link underline="hover" 
                              color="inherit" 
                              href="/dsa/"> 
                            Data Structures 
                        </Link> 
                        <Link 
                            underline="hover"
                            color="text.primary"
                            href="/dsa/array"
                            aria-current="page"
                        > 
                            Array 
                        </Link> 
                    </Breadcrumbs> 
                </div> 
                <div> 
                    <Breadcrumbs aria-label="breadcrumb" 
                                 separator="-"> 
                        <Link underline="hover"
                            color="inherit" href="/"> 
                            Home 
                        </Link> 
                        <Link underline="hover"
                            color="inherit" href="/dsa/"> 
                            Data Structures 
                        </Link> 
                        <Link 
                            underline="hover"
                            color="text.primary"
                            href="/dsa/array"
                            aria-current="page"
                        > 
                            Array 
                        </Link> 
                    </Breadcrumbs> 
                </div> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出:

React MUI面包屑导航

示例2： 以下示例演示了带有图标的React MUI可折叠面包屑导航组件。

import React from "react"; 
import Breadcrumbs from "@mui/material/Breadcrumbs"; 
import Link from "@mui/material/Link"; 
import HomeIcon from '@mui/icons-material/Home'; 
import WhatshotIcon from '@mui/icons-material/Whatshot'; 
import DataArray from '@mui/icons-material/DataArray'; 
  
function App() { 
    return ( 
        <div> 
            <div style={{ 
                textAlign: "center", 
                color: "green"
            }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Breadcrumb Navigation</h2> 
            </div> 
            <div style={{ marginLeft: 40 }}> 
                <Breadcrumbs maxItems={2} 
                    aria-label="breadcrumb" separator="›"> 
                    <Link underline="hover"
                        color="inherit" href="/"> 
                        <HomeIcon sx={{ mr: 0.5 }} 
                            fontSize="inherit" /> 
                        Home 
                    </Link> 
                    <Link underline="hover"
                        color="inherit" href="/dsa/"> 
                        <WhatshotIcon sx={{ mr: 0.5 }} 
                            fontSize="inherit" /> 
                        Data Structures 
                    </Link> 
                    <Link 
                        underline="hover"
                        color="text.primary"
                        href="/dsa/array"
                        aria-current="page"
                    > 
                        <DataArray sx={{ mr: 0.5 }}  
                                   fontSize="inherit" /> 
                        Array 
                    </Link> 
                </Breadcrumbs> 
            </div> 
        </div> 
    ); 
} 
  
export default App;