Breadcrumbs

Breadcrumbs 컴포넌트는 현재 페이지의 위치를 표시하는 네비게이션 요소입니다.

기본 사용법

Breadcrumbs는 데이터 기반으로 동작하며, 트리 구조의 메뉴 데이터를 받아 경로를 표시합니다.

import { Breadcrumbs } from '@aift/ui/Breadcrumbs';

export default function Preview() {
  const menuData = [
    {
      id: 1,
      label: 'Home',
      href: '/',
      children: [
        { id: 2, label: 'Docs', href: '/docs', children: [] },
      ],
    },
  ];

  return (
    <div className="max-w-md">
      <Breadcrumbs
        data={menuData}
        keyField="id"
        childrenField="children"
        labelField="label"
        hrefField="href"
        selectedId={2}
      />
    </div>
  );
}

import { Breadcrumbs } from '@aift/ui/Breadcrumbs';export default function Preview() {  const menuData = [    {      id: 1,      label: 'Home',      href: '/',      children: [        { id: 2, label: 'Docs', href: '/docs', children: [] },      ],    },  ];  return (    <div className="max-w-md">      <Breadcrumbs        data={menuData}        keyField="id"        childrenField="children"        labelField="label"        hrefField="href"        selectedId={2}      />    </div>  );}

Breadcrumbs

Breadcrumbs

기본 사용법

On this page