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 React from 'react';
import { Breadcrumbs, Text } from '@mantine/core';

function Demo() {
  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) => (
    <Text variant="link" component="a" href={item.href} key={index}>
      {item.title}
    </Text>
  ));

  return (
    <>
      <Breadcrumbs>{items}</Breadcrumbs>
      <Breadcrumbs separator="→">{items}</Breadcrumbs>
    </>
  );
}