Component

Breadcrumb

현재 페이지가 정보 구조에서 어디에 있는지 보여 줍니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

중간 경로를 접어 표시

현재 페이지 이름

Code

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbOverflow, IconButton, BreadcrumbCurrent } from '@amineslab/ui'

import { MoreHorizontal } from '@amineslab/ui/icons'

export default function ExamplePreview() {
  return ((<Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">프로젝트</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        {(<>
            <BreadcrumbOverflow>
              <IconButton label="숨겨진 경로 보기" variant="ghost" icon={<MoreHorizontal aria-hidden="true" size={16}/>}/>
            </BreadcrumbOverflow>
            <BreadcrumbSeparator />
          </>)}
        <BreadcrumbItem>
          <BreadcrumbCurrent>{"설정"}</BreadcrumbCurrent>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>))
}

Props

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbCurrent,
  BreadcrumbSeparator,
  BreadcrumbOverflow,
} from '@amineslab/ui'

`Breadcrumb`

HTML <nav> 요소의 표준 속성을 그대로 받습니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Two levels

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbCurrent } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="#">문서</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbCurrent>Breadcrumb</BreadcrumbCurrent>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>))
}

사용 기준

권장하는 사용

깊이가 두 단계 이상이고 상위 페이지로 이동할 가치가 있을 때 사용합니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Tab: link 또는 overflow 작업으로 포커스 이동
Enter: link 또는 overflow 작업 실행