Theme PlaygroundBlocks

Breadcrumb

사용자가 현재 페이지의 위치를 파악하고 이전 페이지로 쉽게 이동할 수 있도록 도와주는 네비게이션 컴포넌트입니다. 
import { Breadcrumb } from '@vapor-ui/core';

export default function DefaultBreadcrumb() {
    return (
        <Breadcrumb.Root size="md">
            <Breadcrumb.List>
                <Breadcrumb.Item>
                    <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
                </Breadcrumb.Item>
                <Breadcrumb.Separator />
                <Breadcrumb.Item>
                    <Breadcrumb.Link href="#">Products</Breadcrumb.Link>
                </Breadcrumb.Item>
                <Breadcrumb.Separator />
                <Breadcrumb.Item>
                    <Breadcrumb.Link href="#" current>
                        Current Page
                    </Breadcrumb.Link>
                </Breadcrumb.Item>
            </Breadcrumb.List>
        </Breadcrumb.Root>
    );
}

Property

Size

브레드크럼 사이즈는 sm, md, lg, xl 로 제공합니다.

import { Breadcrumb } from '@vapor-ui/core';

export default function BreadcrumbSize() {
    return (
        <div className="flex flex-col gap-4">
            <div>
                <h4 className="mb-2 text-sm font-medium">Small</h4>
                <Breadcrumb.Root size="sm">
                    <Breadcrumb.List>
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#" current>
                                Current
                            </Breadcrumb.Link>
                        </Breadcrumb.Item>
                    </Breadcrumb.List>
                </Breadcrumb.Root>
            </div>

            <div>
                <h4 className="mb-2 text-sm font-medium">Medium</h4>
                <Breadcrumb.Root size="md">
                    <Breadcrumb.List>
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#" current>
                                Current
                            </Breadcrumb.Link>
                        </Breadcrumb.Item>
                    </Breadcrumb.List>
                </Breadcrumb.Root>
            </div>

            <div>
                <h4 className="mb-2 text-sm font-medium">Large</h4>
                <Breadcrumb.Root size="lg">
                    <Breadcrumb.List>
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#" current>
                                Current
                            </Breadcrumb.Link>
                        </Breadcrumb.Item>
                    </Breadcrumb.List>
                </Breadcrumb.Root>
            </div>

            <div>
                <h4 className="mb-2 text-sm font-medium">Extra Large</h4>
                <Breadcrumb.Root size="xl">
                    <Breadcrumb.List>
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#" current>
                                Current
                            </Breadcrumb.Link>
                        </Breadcrumb.Item>
                    </Breadcrumb.List>
                </Breadcrumb.Root>
            </div>
        </div>
    );
}

Current

현재 페이지를 나타내는 링크의 상태를 설정할 수 있습니다.

import { Breadcrumb } from '@vapor-ui/core';

export default function BreadcrumbCurrent() {
    return (
        <div className="flex flex-col gap-4">
            <div>
                <h4 className="mb-2 text-sm font-medium">Normal Links</h4>
                <Breadcrumb.Root size="md">
                    <Breadcrumb.List>
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#">Products</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#">Category</Breadcrumb.Link>
                        </Breadcrumb.Item>
                    </Breadcrumb.List>
                </Breadcrumb.Root>
            </div>

            <div>
                <h4 className="mb-2 text-sm font-medium">With Current Page</h4>
                <Breadcrumb.Root size="md">
                    <Breadcrumb.List>
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#">Products</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#" current>
                                Current Page
                            </Breadcrumb.Link>
                        </Breadcrumb.Item>
                    </Breadcrumb.List>
                </Breadcrumb.Root>
            </div>
        </div>
    );
}

Examples

With Ellipsis

긴 네비게이션 경로에서 중간 단계를 생략 표시로 나타낸 패턴입니다.

import { Breadcrumb } from '@vapor-ui/core';

export default function BreadcrumbEllipsis() {
    return (
        <Breadcrumb.Root size="md">
            <Breadcrumb.List>
                <Breadcrumb.Item>
                    <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
                </Breadcrumb.Item>
                <Breadcrumb.Separator />
                <Breadcrumb.Item>
                    <Breadcrumb.Link href="#">Category</Breadcrumb.Link>
                </Breadcrumb.Item>
                <Breadcrumb.Separator />
                <Breadcrumb.Item>
                    <Breadcrumb.Ellipsis />
                </Breadcrumb.Item>
                <Breadcrumb.Separator />
                <Breadcrumb.Item>
                    <Breadcrumb.Link href="#">Subcategory</Breadcrumb.Link>
                </Breadcrumb.Item>
                <Breadcrumb.Separator />
                <Breadcrumb.Item>
                    <Breadcrumb.Link href="#" current>
                        Current Page
                    </Breadcrumb.Link>
                </Breadcrumb.Item>
            </Breadcrumb.List>
        </Breadcrumb.Root>
    );
}

Composition Pattern

브레드크럼 컴포넌트의 다양한 구성 패턴입니다.

import { Breadcrumb } from '@vapor-ui/core';
import { ChevronRightOutlineIcon, HomeIcon } from '@vapor-ui/icons';

export default function BreadcrumbComposition() {
    return (
        <div className="space-y-6">
            {/* Basic composition */}
            <div>
                <h4 className="mb-2 text-sm font-medium">기본 구성</h4>
                <Breadcrumb.Root size="md">
                    <Breadcrumb.List>
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#">Products</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Link current>Details</Breadcrumb.Link>
                        </Breadcrumb.Item>
                    </Breadcrumb.List>
                </Breadcrumb.Root>
            </div>

            {/* With custom separator */}
            <div>
                <h4 className="mb-2 text-sm font-medium">커스텀 구분자</h4>
                <Breadcrumb.Root size="md">
                    <Breadcrumb.List>
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator>
                            <ChevronRightOutlineIcon />
                        </Breadcrumb.Separator>
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#">Products</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator>
                            <ChevronRightOutlineIcon />
                        </Breadcrumb.Separator>
                        <Breadcrumb.Item>
                            <Breadcrumb.Link current>Details</Breadcrumb.Link>
                        </Breadcrumb.Item>
                    </Breadcrumb.List>
                </Breadcrumb.Root>
            </div>

            {/* With icons in links */}
            <div>
                <h4 className="mb-2 text-sm font-medium">링크에 아이콘 포함</h4>
                <Breadcrumb.Root size="md">
                    <Breadcrumb.List>
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#" className="flex items-center gap-1">
                                <HomeIcon className="w-4 h-4" />
                                Home
                            </Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Link href="#">Dashboard</Breadcrumb.Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Separator />
                        <Breadcrumb.Item>
                            <Breadcrumb.Link current>Settings</Breadcrumb.Link>
                        </Breadcrumb.Item>
                    </Breadcrumb.List>
                </Breadcrumb.Root>
            </div>
        </div>
    );
}

Props Table

브레드크럼의 메인 컨테이너 컴포넌트입니다. size 속성을 제공하며, 모든 하위 컴포넌트에서 공통으로 사용할 수 있도록 컨텍스트를 제공합니다.

PropDefaultType
render?
nav
ReactElementfunction
size?
md
smmdlgxl
className?
undefined
string
children?
undefined
ReactNode

브레드크럼 항목들을 담는 순서가 있는 리스트 컨테이너입니다. 의미적으로 올바른 구조를 위해 <ol> 요소를 기반으로 합니다.

PropDefaultType
render?
ol
ReactElementfunction
className?
undefined
string
children?
undefined
ReactNode

개별 브레드크럼 항목을 나타내는 컴포넌트입니다. 각각의 링크나 구분자를 감싸는 역할을 합니다.

PropDefaultType
render?
li
ReactElementfunction
className?
undefined
string
children?
undefined
ReactNode

브레드크럼 내의 클릭 가능한 링크 컴포넌트입니다. 현재 페이지인지 여부에 따라 시각적 스타일과 접근성 속성이 자동으로 조정됩니다.

PropDefaultType
render?
a | span
ReactElementfunction
current?
false
boolean
href?
undefined
string
className?
undefined
string
children?
undefined
ReactNode

브레드크럼 항목들 사이의 구분자를 표시하는 컴포넌트입니다. 기본적으로 슬래시(/) 아이콘을 사용하며, 커스텀 아이콘으로 변경할 수 있습니다.

PropDefaultType
render?
li
ReactElementfunction
className?
undefined
string
children?
undefined
ReactNode

긴 네비게이션 경로에서 중간 단계를 생략할 때 사용하는 컴포넌트입니다. 기본적으로 점 3개(...) 아이콘을 표시하며, 커스텀 아이콘으로 변경할 수 있습니다.

PropDefaultType
render?
span
ReactElementfunction
className?
undefined
string
children?
undefined
ReactNode

On this page

Property
Size
Current
Examples
With Ellipsis
Composition Pattern
Props Table
Breadcrumb.Root
Breadcrumb.List
Breadcrumb.Item
Breadcrumb.Link
Breadcrumb.Separator
Breadcrumb.Ellipsis