Breadcrumb

계층구조 내에서 현재 위치를 표시합니다. 또한 계층 구조에서 상위 단계로 이동할 수 있습니다.

import { Breadcrumb } from 'sud-ui';

사용할 때

계층 구조가 두 개 이상인 경우.

사용자에게 현재 위치를 표시하고 싶을 때.

상위 단계로 이동할 수 있는 버튼을 제공할 때.

사용예제

Basic Usage

기본적인 사용 방법입니다.

Custom Separator

Separator를 변형하여 사용할 수 있습니다.

With Dropdown

Dropdown을 사용하여 하위 메뉴를 표시할 수 있습니다.

import React from 'react';
import { Breadcrumb, Dropdown, Typography } from 'sud-ui';
import { AngleDown } from 'sud-icons';

const DropdownBreadcrumb = () => {
  const items = [
    { label: "Home", href: "/" },
    { label: "Component", href: "/component" },
    {
      label: (
        <Dropdown
          items={[
            {
              key: "breadcrumb",
              label: "Breadcrumb",
              onClick: () => (window.location.href = "/component/breadcrumb")
            },
            {
              key: "dropdown",
              label: "Dropdown",
              onClick: () => (window.location.href = "/component/dropdown")
            }
          ]}
        >
          <Typography className="flex items-center gap-[5px]" as="div" pretendard="SB">
            Select
            <AngleDown size={16} />
          </Typography>
        </Dropdown>
      )
    }
  ];

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

export default DropdownBreadcrumb;

Custom Style

linkStyle, separatorStyle, itemStyle을 통해 각 요소의 스타일을 커스텀할 수 있습니다.

import React from 'react';
import { Breadcrumb } from 'sud-ui';

const CustomStyleBreadcrumb = () => {
  const items = [
    { label: "Home", href: "/" },
    { label: "Component", href: "/component" },
    { label: "Breadcrumb" }
  ];

  return (
    <Breadcrumb
      items={items}
      linkStyle={{ color: "#1677ff", fontWeight: "bold" }}
      separatorStyle={{ color: "#ff4d4f" }}
      itemStyle={{ 
        background: "#f5f5f5", 
        borderRadius: "4px", 
        padding: "2px 6px",
        margin: "0 4px"
      }}
    />
  );
};

export default CustomStyleBreadcrumb;

With Icon

Menu에 Icon을 사용할 수 있습니다.

Icon Separator

Separator를 변형하여 사용할 수 있습니다.

import React from 'react';
import { Breadcrumb } from 'sud-ui';
import { HomeOutline, TriangleRight } from 'sud-icons';

const IconSeparatorBreadcrumb = () => {
  const items = [
    { label: <HomeOutline />, href: "/" },
    { label: "Component", href: "/component" },
    { label: "Breadcrumb" }
  ];

  return (
    <Breadcrumb
      items={items}
      separator={<TriangleRight size={16} />}
    />
  );
};

export default IconSeparatorBreadcrumb;

Size

텍스트 크기를 설정할 수 있습니다.

import React from 'react';
import { Breadcrumb } from 'sud-ui';

const SizeBreadcrumb = () => {
  const items = [
    { label: "Home", href: "/" },
    { label: "Component", href: "/component" },
    { label: "Breadcrumb" }
  ];

  return (
    <div className="flex flex-col gap-[10px]">
      <Breadcrumb items={items} size="sm" />
      <Breadcrumb items={items} size="base" />
      <Breadcrumb items={items} size="lg" />
      <Breadcrumb items={items} size="xl" />
    </div>
  );
};

export default SizeBreadcrumb;

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

items

브레드크럼 항목 목록. 각 항목은 { label, href?, target?, rel? } 형태이며, href가 있는 중간 항목은 네이티브 링크로 렌더링됩니다.

BreadcrumbItem[]

[]

separator

항목 사이의 구분자 (문자열 또는 ReactNode)

ReactNode

'>'

className

추가 클래스명

string

-

style

컨테이너 스타일

React.CSSProperties

{}

separatorStyle

구분자 스타일

React.CSSProperties

{}

linkStyle

링크 스타일

React.CSSProperties

{}

itemStyle

항목 스타일

React.CSSProperties

{}

listStyle

목록 스타일

React.CSSProperties

{}

size

텍스트 크기 (모든 항목과 구분자에 적용)

xs

|

sm

|

base

|

lg

|

xl

|

2xl

|

3xl

|

4xl

base

Soon UI Design

Breadcrumb

사용할 때

사용예제

사용 방법

개인정보 처리방침

서비스 약관