Breadcrumbs

Separates list of react nodes with given separator

Source

Docs

Package

Usage

Breadcrumbs component accepts any number of React nodes as children and adds a given separator (defaults to /) between them:

import { Breadcrumbs, Anchor } from '@thinker-core/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="→" separatorMargin="md" mt="xs">
        {items}
      </Breadcrumbs>
      <Breadcrumbs>
        {items}
        <Text>With text</Text>
      </Breadcrumbs>
    </>
  );
}

Max items

Breadcrumbs component accepts maxItems prop to limit the number of items which will show ellipsis (default to ...) when there are more items than the limit.

import { Breadcrumbs, Anchor } from '@thinker-core/mantine-core';

const items = [
  { title: '1', href: '#' },
  { title: '2', href: '#' },
  { title: '3', href: '#' },
  { title: '4', href: '#' },
  { title: '5', href: '#' },
  { title: '6', href: '#' },
  { title: '7', href: '#' },
  { title: '8', href: '#' },
  { title: '9', href: '#' },
].map((item, index) => (
  <Anchor href={item.href} key={index}>
    {item.title}
  </Anchor>
));

function Demo() {
  return (
    <>
      <Breadcrumbs maxItems={5}>{items}</Breadcrumbs>
    </>
  );
}

Ellipsis

Breadcrumbs component accepts ellipsis prop to customize the ellipsis element.

The ellipsis element is a clickable element that will show all the items when clicked.

import { Breadcrumbs, Anchor } from '@thinker-core/mantine-core';

const items = [
  { title: '1', href: '#' },
  { title: '2', href: '#' },
  { title: '3', href: '#' },
  { title: '4', href: '#' },
  { title: '5', href: '#' },
  { title: '6', href: '#' },
  { title: '7', href: '#' },
  { title: '8', href: '#' },
  { title: '9', href: '#' },
].map((item, index) => (
  <Anchor href={item.href} key={index}>
    {item.title}
  </Anchor>
));

function Demo() {
  return (
    <>
      <Breadcrumbs maxItems={5} ellipsis="😂">{items}</Breadcrumbs>
    </>
  );
}

Anchor

Burger