1. BreadCrumb

BreadCrumb 컴포넌트는 웹 페이지 내에서 사용자가 현재 위치한 페이지의 경로를 나타내는 내비게이션 요소입니다. 각 경로는 화살표 아이콘으로 구분되며, 링크를 클릭하여 다른 페이지로 이동할 수 있습니다. 활성 상태 및 호버 상태에 따라 색상을 변경할 수 있습니다.

1.1. Import

import BreadCrumb from '@components/BreadCrumb/BreadCrumb';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

Home

Docs

Breadcrumb

import BreadCrumb from '@components/BreadCrumb/BreadCrumb';

function Example() {
  return (
    <BreadCrumb
      items={[
        { href: "", children: "Home" },
        { href: "/docs", children: "Docs" },
        { children: "Breadcrumb" },
      ]}
    />
  );
}

export default Example;

1.3. Customizing BreadCrumb

BreadCrumb 컴포넌트는 다양한 색상 옵션을 통해 호버 및 활성 상태의 링크 색상을 사용자 정의할 수 있습니다.

Home

Docs

Breadcrumb

import BreadCrumb from '@components/BreadCrumb/BreadCrumb';

function Example() {
  return (
    <BreadCrumb
      items={[
        { href: "/", children: "Home" },
        { href: "/docs", children: "Docs" },
        { children: "Breadcrumb" },
      ]}
      hoverColor="Basic"
      activeColor="Basic"
    />
  );
}

export default Example;

1.4. Props

BreadCrumb 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`items`	각 링크를 나타내는 객체들의 배열입니다.	`{ href?: string, className?: string, children: React.ReactNode }[]`	`[]`
`hoverColor`	링크에 마우스를 올렸을 때의 색상을 설정합니다.	`"black" \| "Basic" \| "Primary" \| "Danger"`	`"black"`
`activeColor`	활성화된 링크의 색상을 설정합니다.	`"black" \| "Basic" \| "Primary" \| "Danger"`	`"black"`

1.5. Full Example

import BreadCrumb from '@components/BreadCrumb/BreadCrumb';

function Example() {
  return (
    <div>
      <BreadCrumb
        items={[
          { href: "/", children: "Home" },
          { href: "/docs", children: "Docs" },
          { children: "Breadcrumb" },
        ]}
        hoverColor="Basic"
        activeColor="Danger"
      />
    </div>
  );
}

export default Example;

2. BreadCrumbSlash

BreadCrumbSlash 컴포넌트는 웹 페이지 내에서 사용자가 현재 위치한 페이지의 경로를 나타내는 내비게이션 요소입니다. 각 경로는 슬래시(/) 기호로 구분되며, 링크를 클릭하여 다른 페이지로 이동할 수 있습니다. 활성 상태 및 호버 상태에 따라 색상을 변경할 수 있습니다.

2.1. Import

import BreadCrumbSlash from '@components/BreadCrumb/BreadCrumbSlash';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

Home

/Docs

/Breadcrumb

import BreadCrumbSlash from '@components/BreadCrumb/BreadCrumbSlash';

function Example() {
  return (
    <BreadCrumbSlash
      items={[
        { href: "/", children: "Home" },
        { href: "/docs", children: "Docs" },
        { children: "Breadcrumb" },
      ]}
    />
  );
}

export default Example;

2.3. Customizing BreadCrumbSlash

BreadCrumbSlash 컴포넌트는 다양한 색상 옵션을 통해 호버 및 활성 상태의 링크 색상을 사용자 정의할 수 있습니다.

Home

/Docs

/Breadcrumb

import BreadCrumbSlash from '@components/BreadCrumb/BreadCrumbSlash';

function Example() {
  return (
    <BreadCrumbSlash
      items={[
        { href: "/", children: "Home" },
        { href: "/docs", children: "Docs" },
        { children: "Breadcrumb" },
      ]}
      hoverColor="Basic"
      activeColor="Basic"
    />
  );
}

export default Example;

2.4. Props

BreadCrumbSlash 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`items`	각 링크를 나타내는 객체들의 배열입니다.	`{ href?: string, className?: string, children: React.ReactNode }[]`	`[]`
`hoverColor`	링크에 마우스를 올렸을 때의 색상을 설정합니다.	`"black" \| "Basic" \| "Primary" \| "Danger"`	`"black"`
`activeColor`	활성화된 링크의 색상을 설정합니다.	`"black" \| "Basic" \| "Primary" \| "Danger"`	`"black"`

2.5. Full Example

import BreadCrumbSlash from '@components/BreadCrumb/BreadCrumbSlash';

function Example() {
  return (
    <div>
      <BreadCrumbSlash
        items={[
          { href: "/", children: "Home" },
          { href: "/docs", children: "Docs" },
          { children: "Breadcrumb" },
        ]}
        hoverColor="Primary"
        activeColor="Danger"
      />
    </div>
  );
}

export default Example;

3. BreadCrumbDropdown

BreadCrumbDropdown 컴포넌트는 웹 페이지 내에서 사용자가 현재 위치한 페이지의 경로를 나타내는 내비게이션 요소로, 드롭다운 메뉴를 통해 추가적인 경로를 선택할 수 있는 기능을 제공합니다. 사용자는 드롭다운 메뉴에서 옵션을 선택하거나 직접 링크를 클릭하여 이동할 수 있습니다.

3.1. Import

import BreadCrumbDropdown from '@components/BreadCrumb/BreadCrumbDropdown';

3.2. Usage

기본 사용 예제는 아래와 같습니다:

Home
Docs
Components

import BreadCrumbDropdown from '@components/BreadCrumb/BreadCrumbDropdown';

function Example() {
  return (
    <BreadCrumbDropdown
      items={[
        { href: "/", children: "Home" },
        { href: "/docs", children: "Docs" },
        {
          children: "Components",
          dropdownItems: [
            { label: "Button", href: "/docs/button" },
            { label: "Input", href: "/docs/input" },
          ],
        },
      ]}
    />
  );
}

export default Example;

3.3. Customizing BreadCrumbDropdown

BreadCrumbDropdown 컴포넌트는 다양한 드롭다운 메뉴를 지원하며, 각 경로에 대해 여러 개의 드롭다운 항목을 추가할 수 있습니다. 이러한 옵션은 사용자가 특정 경로와 관련된 여러 페이지로 쉽게 이동할 수 있도록 합니다.

Home
Docs
Components
Breadcrumb

import BreadCrumbDropdown from '@components/BreadCrumb/BreadCrumbDropdown';

function Example() {
  return (
    <BreadCrumbDropdown
     items={[
            { href: "/", children: "Home" },
            { href: "/docs", children: "Docs" },
            {
              children: "Components",
              dropdownItems: [
                { label: "Home", href: "/" },
                { label: "Breadcrumb", href: "/components/breadcrumb" },
                { label: "UserPage", href: "/userpage" },
              ],
            },
            { children: "Breadcrumb" },
          ]}
    />
  );
}

export default Example;

3.4. Props

BreadCrumbDropdown 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`items`	각 링크와 드롭다운 항목을 나타내는 객체들의 배열입니다.	`{ href?: string, className?: string, children: React.ReactNode, dropdownItems?: { label: string, href: string }[] }[]`	`[]`

3.5. Full Example

import BreadCrumbDropdown from '@components/BreadCrumb/BreadCrumbDropdown';

function Example() {
  return (
    <div>
      <BreadCrumbDropdown
      items={[
            { href: "/", children: "Home" },
            { href: "/docs", children: "Docs" },
            {
              children: "Components",
              dropdownItems: [
                { label: "Home", href: "/" },
                { label: "Breadcrumb", href: "/components/breadcrumb" },
                { label: "UserPage", href: "/userpage" },
              ],
            },
            { children: "Breadcrumb" },
          ]}
      />
    </div>
  );
}

export default Example;