SINGULARITY
DOCS
Reference
Breadcrumbs
Breadcrumbs are a sequence of links that illustrate a page's position within a website's hierarchical structure, enabling navigation to any parent page.
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
Maintain interactivity for the final breadcrumb.
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
The following examples demonstrate the use of 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 approach, consider incorporating a Menu component to present condensed links in a dropdown format.
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
Below is an example of tailoring the component. Explore more details 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 }) => {
return {
backgroundColor: theme.palette.grey[100],
height: theme.spacing(3),
color: (theme.vars || theme).palette.text.primary,
fontWeight: theme.typography.fontWeightRegular,
'&:hover, &:focus': {
backgroundColor: emphasize(theme.palette.grey[100], 0.06),
...theme.applyStyles('dark', {
backgroundColor: emphasize(theme.palette.grey[800], 0.06),
}),
},
'&:active': {
boxShadow: theme.shadows[1],
backgroundColor: emphasize(theme.palette.grey[100], 0.12),
...theme.applyStyles('dark', {
backgroundColor: emphasize(theme.palette.grey[800], 0.12),
}),
},
...theme.applyStyles('dark', {
backgroundColor: theme.palette.grey[800],
}),
};
}) as typeof Chip;
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
Ensure the
Breadcrumbs component includes an aria-label description for accessibility.The accessibility of this component depends on:
- Links are organized using an ordered list (
<ol>element). - Visual separators between links are hidden from screen readers using
aria-hidden. - A
navelement with anaria-labelmarks the structure as a breadcrumb trail, establishing it as a navigation landmark for easy discovery.