브레드크럼

브레드크럼 (Breadcrumb)

사이트의 계층 구조에서 현재 페이지의 위치를 표시하는 데 사용하는 컴포넌트예요. 사용자가 현재 위치를 파악하고 상위 경로로 이동할 수 있게 도와줘요.

출처: 문서

본문

사용법 (Usage)

import { Breadcrumb } from "@chakra-ui/react"

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link />
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
  </Breadcrumb.List>
</Breadcrumb.Root>

:::info

닫힌 컴포넌트 조합(closed component composition)을 선호한다면, 아래 스니펫을 확인해 보세요.

:::

예제 (Examples)

크기 (Sizes)

size prop을 사용해 브레드크럼 컴포넌트의 크기를 바꿀 수 있어요.

변형 (Variants)

variant prop을 사용해 브레드크럼 컴포넌트의 모양을 바꿀 수 있어요.

구분자와 함께 (With Separator)

Breadcrumb.Separator 컴포넌트를 사용해 커스텀 구분자를 추가할 수 있어요.

아이콘 (Icon)

Breadcrumb.Link 안에 아이콘을 렌더링해 브레드크럼에 커스텀 아이콘을 추가할 수 있어요.

메뉴 (Menu)

Breadcrumb.Link을 MenuTrigger 안에 감싸서 메뉴 컴포넌트 안에서도 올바르게 작동하도록 할 수 있어요.

생략 부호 (Ellipsis)

Breadcrumb.Ellipsis 컴포넌트를 렌더링해 브레드크럼 항목 뒤에 생략 부호(…)를 보여줄 수 있어요.

라우팅 라이브러리 (Routing Library)

asChild prop을 사용해 브레드크럼 링크의 기본 요소를 바꿀 수 있어요.

import { Breadcrumb } from "@chakra-ui/react"
import Link from "next/link"

export const Example = () => {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link asChild>
            <Link href="/docs">Docs</Link>
          </Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
      </Breadcrumb.List>
    </Breadcrumb.Root>
  )
}

닫힌 컴포넌트 (Closed Component)

Breadcrumb를 닫힌 컴포넌트 조합으로 설정하는 방법이에요.

닫힌 컴포넌트를 프로젝트에 자동으로 추가하려면 다음 명령을 실행하세요:

npx @chakra-ui/cli snippet add breadcrumb

Props

Root

탐색기 (Explorer)

Breadcrumb 컴포넌트의 파트들을 인터랙티브하게 탐색해 보세요. 사이드바에서 파트를 클릭하면 미리보기에서 해당 파트가 강조 표시돼요.

더 알아보기 (Learn more)