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: '#' },
{ title: 'Mantine hooks', href: '#' },
{ title: 'use-id', href: '#' },
].map((item, index) => (
<Anchor href={item.href} key={index}>
{item.title}
</Anchor>
));
function Demo() {
return (
<>
<Breadcrumbs>{items}</Breadcrumbs>
<Breadcrumbs separator="">{items}</Breadcrumbs>
</>
);
}
Download more icon variants from https://tabler-icons.io/i/search

Breadcrumbs component props

NameTypeDescription
children *
ReactNode
React nodes that should be separated
separator
ReactNode
Separator between breadcrumbs

Breadcrumbs component Styles API

NameStatic selectorDescription
root.mantine-Breadcrumbs-rootRoot element
breadcrumb.mantine-Breadcrumbs-breadcrumbBreadcrumb item wrapper
separator.mantine-Breadcrumbs-separatorSeparator element