Files
react-test/docs/data/joy/components/breadcrumbs/BreadcrumbsSizes.js
how2ice 005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
init project
2025-12-12 14:26:25 +09:00

39 lines
1.2 KiB
JavaScript

import Breadcrumbs from '@mui/joy/Breadcrumbs';
import Link from '@mui/joy/Link';
import Stack from '@mui/joy/Stack';
import Typography from '@mui/joy/Typography';
export default function BreadcrumbsSizes() {
return (
<Stack sx={{ display: 'flex', alignItems: 'center' }}>
<Breadcrumbs separator="—" aria-label="breadcrumbs" size="sm">
{['Home', 'TV Shows', 'Futurama', 'Characters'].map((item) => (
<Link key={item} color="neutral" href="#sizes">
{item}
</Link>
))}
<Typography>Dr. Zoidberg</Typography>
</Breadcrumbs>
<Breadcrumbs separator="—" aria-label="breadcrumbs" size="md">
{['Home', 'TV Shows', 'Futurama', 'Characters'].map((item) => (
<Link key={item} color="neutral" href="#sizes">
{item}
</Link>
))}
<Typography>Dr. Zoidberg</Typography>
</Breadcrumbs>
<Breadcrumbs separator="—" aria-label="breadcrumbs" size="lg">
{['Home', 'TV Shows', 'Futurama', 'Characters'].map((item) => (
<Link key={item} color="neutral" href="#sizes">
{item}
</Link>
))}
<Typography>Dr. Zoidberg</Typography>
</Breadcrumbs>
</Stack>
);
}