Breadcrumbs

Separate list of react nodes with given separator

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

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>
    </>
  );
}