Breadcrumbs

Separate list of react nodes with given separator
Import

Usage

Breadcrumbs accept any react nodes as children and places given separator (defaults to /) between them:

import { Breadcrumbs, Anchor } from '@mantine/core';
const items = [
{ title: 'Mantine', href: 'https://mantine.dev' },
{ title: 'Mantine hooks', href: 'https://mantine.dev/hooks/getting-started' },
{ title: 'use-id', href: 'https://mantine.dev/hooks/use-id' },
].map((item, index) => (
<Anchor href={item.href} key={index}>
{item.title}
</Anchor>
));
function Demo() {
return (
<>
<Breadcrumbs>{items}</Breadcrumbs>
<Breadcrumbs separator="">{items}</Breadcrumbs>
</>
);
}
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback