Breadcrumbs

Breadcrumbs 컴포넌트는 여러 개의 React 노드 사이에 주어진 구분자(separator, 기본값은 /)를 넣어 경로 탐색 목록을 만들어 주는 컴포넌트예요.

출처: 문서

본문

Breadcrumbs 컴포넌트는 원하는 만큼의 React 노드를 children으로 받고, 그 사이에 주어진 구분자를 추가해요. 구분자의 기본값은 /예요.

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="→" separatorMargin="md" mt="xs">
        {items}
      </Breadcrumbs>
    </>
  );
}

구분자는 separator prop으로 바꿀 수 있고, separatorMargin prop으로 구분자 주변 여백도 조절할 수 있어요. 위 예시에서는 기본 /와 화살표 → 구분자를 각각 보여 주고 있어요.

더 알아보기 (Learn more)