Breadcrumb - Vapor UI

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

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

Property

Size

Breadcrumb 사이즈는 sm, md, lg, xl 로 제공합니다.

Small

Medium

Large

Extra Large

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.Item href="#">Home</Breadcrumb.Item>
                    <Breadcrumb.Separator />
                    <Breadcrumb.Item href="#" current>
                        Current
                    </Breadcrumb.Item>
                </Breadcrumb.Root>
            </div>

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

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

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

Current

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

Normal Links

With Current Page

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.Item href="#">Home</Breadcrumb.Item>
                    <Breadcrumb.Separator />
                    <Breadcrumb.Item href="#">Products</Breadcrumb.Item>
                    <Breadcrumb.Separator />
                    <Breadcrumb.Item href="#">Category</Breadcrumb.Item>
                </Breadcrumb.Root>
            </div>

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

Examples

With Ellipsis

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

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

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

Composition Pattern

Breadcrumb 컴포넌트의 다양한 구성 패턴입니다.

기본 구성

커스텀 구분자

링크에 아이콘 포함

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.Item href="#">Home</Breadcrumb.Item>
                    <Breadcrumb.Separator />
                    <Breadcrumb.Item href="#">Products</Breadcrumb.Item>
                    <Breadcrumb.Separator />
                    <Breadcrumb.Item current>Details</Breadcrumb.Item>
                </Breadcrumb.Root>
            </div>

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

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