Breadcrumb

Breadcrumb (브레드크럼)

Breadcrumb는 시스템의 계층 구조가 두 단계보다 깊을 때 현재 위치를 알려 주고, 더 높은 단계로 돌아갈 수 있게 해 주는 내비게이션 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

• 시스템의 계층 구조가 두 단계 이상일 때.
• 사용자에게 현재 위치를 알려줘야 할 때.
• 사용자가 더 높은 단계로 돌아갈 필요가 있을 수 있을 때.

예제 (Examples)

기본 사용 (Basic Usage)

가장 단순한 사용법이에요.

import React from 'react';
import { Breadcrumb } from 'antd';

const App: React.FC = () => {
  return (
    <Breadcrumb
      items={[
        {
          title: 'Home',
        },
        {
          title: <a href="">Application Center</a>,
        },
        {
          title: <a href="">Application List</a>,
        },
        {
          title: 'An Application',
        },
      ]}
    />
  );
};

export default App;

아이콘과 함께 (With an Icon)

아이콘은 텍스트 앞에 배치해야 해요. 타사 아이콘 라이브러리(예: lucide, react-icons)의 순수 <svg>는 텍스트와 함께 세로 중앙에 정렬되고 간격이 유지돼요.

import React from 'react';
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
import { Breadcrumb } from 'antd';

// Icons from third-party libraries (e.g. lucide, react-icons) render as a bare `<svg>`
// rather than an `.anticon` wrapper. It stays centred with, and spaced from, the label.
const ChartIcon: React.FC = () => (
  <svg
    viewBox="0 0 24 24"
    width="1em"
    height="1em"
    fill="none"
    stroke="currentColor"
    strokeWidth={2}
    aria-hidden="true"
  >
    <path d="M3 3v18h18" />
    <path d="M7 14l4-4 3 3 5-6" />
  </svg>
);

const App: React.FC = () => (
  <Breadcrumb
    items={[
      {
        href: '',
        title: <HomeOutlined />,
      },
      {
        href: '',
        title: (
          <>
            <UserOutlined />
            <span>Application List</span>
          </>
        ),
      },
      {
        href: '',
        title: (
          <>
            <ChartIcon />
            <span>Dashboard</span>
          </>
        ),
      },
      {
        title: 'Application',
      },
    ]}
  />
);

export default App;

파라미터와 함께 (With Params)

라우트 파라미터를 사용해요.

import React from 'react';
import { Breadcrumb } from 'antd';

const App: React.FC = () => (
  <Breadcrumb
    items={[
      {
        title: 'Users',
      },
      {
        title: ':id',
        href: '',
      },
    ]}
    params={{ id: 1 }}
  />
);

export default App;

구분자 설정 (Configuring the Separator)

separator=">"처럼 separator 속성을 설정해 구분자를 커스터마이즈할 수 있어요.

import React from 'react';
import { Breadcrumb } from 'antd';

const App: React.FC = () => (
  <Breadcrumb
    separator=">"
    items={[
      {
        title: 'Home',
      },
      {
        title: 'Application Center',
        href: '',
      },
      {
        title: 'Application List',
        href: '',
      },
      {
        title: 'An Application',
      },
    ]}
  />
);

export default App;

드롭다운 메뉴가 있는 브레드크럼

Breadcrumb는 드롭다운 메뉴를 지원해요.

import React from 'react';
import { Breadcrumb } from 'antd';

const menuItems = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
        General
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
        Layout
      </a>
    ),
  },
  {
    key: '3',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
        Navigation
      </a>
    ),
  },
];

const App: React.FC = () => (
  <Breadcrumb
    items={[
      {
        title: 'Ant Design',
      },
      {
        title: <a href="">Component</a>,
      },
      {
        title: <a href="">General</a>,
        menu: { items: menuItems },
      },
      {
        title: 'Button',
      },
    ]}
  />
);

export default App;

구분자 개별 설정 (Configuring the Separator Independently)

각 항목의 구분자를 별도로 커스터마이즈해요.

import React from 'react';
import { Breadcrumb } from 'antd';

const App: React.FC = () => (
  <Breadcrumb
    separator=""
    items={[
      {
        title: 'Location',
      },
      {
        type: 'separator',
        separator: ':',
      },
      {
        href: '',
        title: 'Application Center',
      },
      {
        type: 'separator',
      },
      {
        href: '',
        title: 'Application List',
      },
      {
        type: 'separator',
      },
      {
        title: 'An Application',
      },
    ]}
  />
);

export default App;

커스텀 시맨틱 DOM 스타일링

classNames와 styles에 객체/함수를 전달해 Breadcrumb의 시맨틱 DOM 스타일을 커스터마이즈할 수 있어요.

import React from 'react';
import { Breadcrumb, Flex } from 'antd';
import type { BreadcrumbProps, GetProp } from 'antd';
import { createStaticStyles } from 'antd-style';

const classNames = createStaticStyles(({ css }) => ({
  root: css`
    padding: 8px;
    border-radius: 4px;
  `,
  item: css`
    color: #1890ff;
  `,
  separator: css`
    color: rgba(0, 0, 0, 0.45);
  `,
}));

const styles: BreadcrumbProps['styles'] = {
  root: { border: '1px solid #f0f0f0', padding: 8, borderRadius: 4 },
  item: { color: '#1890ff' },
  separator: { color: 'rgba(0, 0, 0, 0.45)' },
};

const stylesFn: BreadcrumbProps['styles'] = (
  info,
): GetProp<BreadcrumbProps, 'styles', 'Return'> => {
  const items = info.props.items || [];
  if (items.length > 2) {
    return {
      root: { border: '1px solid #F5EFFF', padding: 8, borderRadius: 4 },
      item: { color: '#8F87F1' },
    };
  }
  return {};
};

const items = [
  { title: 'Ant Design' },
  { title: <a href="">Component</a> },
  { title: 'Breadcrumb' },
];

const App: React.FC = () => {
  return (
    <Flex vertical gap="medium">
      <Breadcrumb
        classNames={classNames}
        items={items.slice(0, 2)}
        styles={styles}
        aria-label="Breadcrumb with Object"
      />
      <Breadcrumb
        classNames={classNames}
        items={items}
        styles={stylesFn}
        aria-label="Breadcrumb with Function"
      />
    </Flex>
  );
};

export default App;

API

공통 props 참고: Common props

Breadcrumb

ItemType

type ItemType = Omit<RouteItemType, 'title' | 'path'> | SeparatorType

RouteItemType

SeparatorType

const item = {
  type: 'separator', // Must have
  separator: '/',
};

browserHistory와 함께 사용

Breadcrumb 항목의 링크는 기본적으로 #를 대상으로 해요. itemRender를 사용해 browserHistory Link를 만들 수 있어요.

import { Link } from 'react-router';

const items = [
  {
    path: '/index',
    title: 'home',
  },
  {
    path: '/first',
    title: 'first',
    children: [
      {
        path: '/general',
        title: 'General',
      },
      {
        path: '/layout',
        title: 'Layout',
      },
      {
        path: '/navigation',
        title: 'Navigation',
      },
    ],
  },
  {
    path: '/second',
    title: 'second',
  },
];

function itemRender(currentRoute, params, items, paths) {
  const isLast = currentRoute?.path === items[items.length - 1]?.path;

  return isLast ? (
    <span>{currentRoute.title}</span>
  ) : (
    <Link to={`/${paths.join('/')}`}>{currentRoute.title}</Link>
  );
}

return <Breadcrumb itemRender={itemRender} items={items} />;

시맨틱 DOM (Semantic DOM)

https://ant.design/components/breadcrumb/semantic.md

디자인 토큰 (Design Token)

컴포넌트 토큰 (Breadcrumb)

전역 토큰 (Global Token)

더 알아보기 (Learn more)

• Menu 컴포넌트 — 내비게이션 메뉴
• Dropdown 컴포넌트 — 드롭다운 메뉴
• Ant Design 시작하기 — 프로젝트 설정