FUSE
DOCS
Nextjs
Reference
Breadcrumbs
A breadcrumbs is a list of links that help visualize a page's location within a site's hierarchical structure, it allows navigation up to any of the ancestors.
Basic breadcrumbs
import * as React from 'react';
import Typography from '@mui/material/Typography';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import Link from '@mui/material/Link';
function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
event.preventDefault();
console.info('You clicked a breadcrumb.');
}
export default function BasicBreadcrumbs() {
return (
<div role="presentation" onClick={handleClick}>
<Breadcrumbs aria-label="breadcrumb">
<Link underline="hover" color="inherit" href="/">
MUI
</Link>
<Link
underline="hover"
color="inherit"
href="/material-ui/getting-started/installation/"
>
Core
</Link>
<Typography sx={{ color: 'text.primary' }}>Breadcrumbs</Typography>
</Breadcrumbs>
</div>
);
}Active last breadcrumb
Keep the last breadcrumb interactive.
import * as React from 'react';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import Link from '@mui/material/Link';
function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
event.preventDefault();
console.info('You clicked a breadcrumb.');
}
export default function ActiveLastBreadcrumb() {
return (
<div role="presentation" onClick={handleClick}>
<Breadcrumbs aria-label="breadcrumb">
<Link underline="hover" color="inherit" href="/">
MUI
</Link>
<Link
underline="hover"
color="inherit"
href="/material-ui/getting-started/installation/"
>
Core
</Link>
<Link
underline="hover"
color="text.primary"
href="/material-ui/react-breadcrumbs/"
aria-current="page"
>
Breadcrumbs
</Link>
</Breadcrumbs>
</div>
);
}Custom separator
In the following examples, we are using two string separators and an SVG icon.
import * as React from 'react';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
event.preventDefault();
console.info('You clicked a breadcrumb.');
}
export default function CustomSeparator() {
const breadcrumbs = [
<Link underline="hover" key="1" color="inherit" href="/" onClick={handleClick}>
MUI
</Link>,
<Link
underline="hover"
key="2"
color="inherit"
href="/material-ui/getting-started/installation/"
onClick={handleClick}
>
Core
</Link>,
<Typography key="3" sx={{ color: 'text.primary' }}>
Breadcrumb
</Typography>,
];
return (
<Stack spacing={2}>
<Breadcrumbs separator="›" aria-label="breadcrumb">
{breadcrumbs}
</Breadcrumbs>
<Breadcrumbs separator="-" aria-label="breadcrumb">
{breadcrumbs}
</Breadcrumbs>
<Breadcrumbs
separator={<NavigateNextIcon fontSize="small" />}
aria-label="breadcrumb"
>
{breadcrumbs}
</Breadcrumbs>
</Stack>
);
}Breadcrumbs with icons
import * as React from 'react';
import Typography from '@mui/material/Typography';
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 GrainIcon from '@mui/icons-material/Grain';
function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
event.preventDefault();
console.info('You clicked a breadcrumb.');
}
export default function IconBreadcrumbs() {
return (
<div role="presentation" onClick={handleClick}>
<Breadcrumbs aria-label="breadcrumb">
<Link
underline="hover"
sx={{ display: 'flex', alignItems: 'center' }}
color="inherit"
href="/"
>
<HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
MUI
</Link>
<Link
underline="hover"
sx={{ display: 'flex', alignItems: 'center' }}
color="inherit"
href="/material-ui/getting-started/installation/"
>
<WhatshotIcon sx={{ mr: 0.5 }} fontSize="inherit" />
Core
</Link>
<Typography
sx={{ color: 'text.primary', display: 'flex', alignItems: 'center' }}
>
<GrainIcon sx={{ mr: 0.5 }} fontSize="inherit" />
Breadcrumb
</Typography>
</Breadcrumbs>
</div>
);
}Collapsed breadcrumbs
/* eslint-disable jsx-a11y/anchor-is-valid */
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: React.MouseEvent<HTMLDivElement, MouseEvent>) {
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>
);
}Condensed with menu
As an alternative, consider adding a Menu component to display the condensed links in a dropdown list:
import * as React from 'react';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import Link from '@mui/material/Link';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import IconButton from '@mui/material/IconButton';
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
export default function CondensedWithMenu() {
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLButtonElement> | null) => {
if (event) {
setAnchorEl(event.currentTarget);
}
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<React.Fragment>
<Menu
anchorEl={anchorEl}
open={open}
onClose={handleClose}
aria-labelledby="with-menu-demo-breadcrumbs"
>
<MenuItem onClick={handleClose}>Breadcrumb 2</MenuItem>
<MenuItem onClick={handleClose}>Breadcrumb 3</MenuItem>
<MenuItem onClick={handleClose}>Breadcrumb 4</MenuItem>
</Menu>
<Breadcrumbs aria-label="breadcrumbs">
<Link color="primary" href="#condensed-with-menu">
Breadcrumb 1
</Link>
<IconButton color="primary" size="small" onClick={handleClick}>
<MoreHorizIcon />
</IconButton>
<Link color="primary" href="#condensed-with-menu">
Breadcrumb 5
</Link>
<Link color="primary" href="#condensed-with-menu">
Breadcrumb 6
</Link>
</Breadcrumbs>
</React.Fragment>
);
}Customization
Here is an example of customizing the component. You can learn more about this in the overrides documentation page.
import * as React from 'react';
import { emphasize, styled } from '@mui/material/styles';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import Chip from '@mui/material/Chip';
import HomeIcon from '@mui/icons-material/Home';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
const StyledBreadcrumb = styled(Chip)(({ theme }) => {
const backgroundColor =
theme.palette.mode === 'light'
? theme.palette.grey[100]
: theme.palette.grey[800];
return {
backgroundColor,
height: theme.spacing(3),
color: theme.palette.text.primary,
fontWeight: theme.typography.fontWeightRegular,
'&:hover, &:focus': {
backgroundColor: emphasize(backgroundColor, 0.06),
},
'&:active': {
boxShadow: theme.shadows[1],
backgroundColor: emphasize(backgroundColor, 0.12),
},
};
}) as typeof Chip; // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591
function handleClick(event: React.MouseEvent<Element, MouseEvent>) {
event.preventDefault();
console.info('You clicked a breadcrumb.');
}
export default function CustomizedBreadcrumbs() {
return (
<div role="presentation" onClick={handleClick}>
<Breadcrumbs aria-label="breadcrumb">
<StyledBreadcrumb
component="a"
href="#"
label="Home"
icon={<HomeIcon fontSize="small" />}
/>
<StyledBreadcrumb component="a" href="#" label="Catalog" />
<StyledBreadcrumb
label="Accessories"
deleteIcon={<ExpandMoreIcon />}
onDelete={handleClick}
/>
</Breadcrumbs>
</div>
);
}Accessibility
Be sure to add a
aria-label description on the Breadcrumbs component.The accessibility of this component relies on:
- The set of links is structured using an ordered list (
<ol>element). - To prevent screen reader announcement of the visual separators between links, they are hidden with
aria-hidden. - A nav element labeled with
aria-labelidentifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.