Breadcrumb

현재 위치를 표시하는 네비게이션 컴포넌트입니다.

개요

Breadcrumb은 사용자의 현재 위치를 계층적으로 표시하는 네비게이션 컴포넌트입니다. Cals Breadcrumb은 Cals 브랜드 스타일이 적용되어 있으며, 예약 관리 네비게이션과 고객 관리 경로 표시에 최적화되어 있습니다. Foundation Breadcrumb의 모든 기능을 상속합니다.

주요 특징:

계층 구조 표시
링크 네비게이션
Cals 브랜드 컬러 적용 (Pink, Blue, Purple)
아이콘 지원
반응형 디자인
드롭다운 메뉴 (경로가 긴 경우)

사용 사례:

Cals 예약 관리 네비게이션 (예약 관리 > 예약 목록 > 예약 상세)
고객 관리 경로 표시 (고객 관리 > 고객 목록 > 고객 상세)
서비스 관리 경로
설정 네비게이션

설치


npx @vortex/cli add breadcrumb --package cals

기본 사용법


import "@vortex/ui-cals/theme"; // Cals 테마 적용
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
} from "@vortex/ui-cals";
 
export default function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">홈</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/reservations">예약 관리</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <span>예약 목록</span>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Variants (변형)

Default

기본 브레드크럼 스타일입니다.


<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">홈</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <span>현재 페이지</span>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

With Icons

아이콘이 포함된 브레드크럼입니다.


import { Home, Calendar, FileText } from "lucide-react";
 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">
        <Home size={16} className="mr-xs" />홈
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/reservations">
        <Calendar size={16} className="mr-xs" />
        예약 관리
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <FileText size={16} className="mr-xs" />
      예약 상세
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;

드롭다운 메뉴가 포함된 브레드크럼입니다.


import { ChevronDown } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@vortex/ui-cals";
 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">홈</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <DropdownMenu>
        <DropdownMenuTrigger className="flex items-center gap-xs">
          ...
          <ChevronDown size={14} />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>예약 관리</DropdownMenuItem>
          <DropdownMenuItem>고객 관리</DropdownMenuItem>
          <DropdownMenuItem>서비스 관리</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <span>현재 페이지</span>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;

Cals 브랜딩

브랜드 컬러

Cals Breadcrumb은 다음 브랜드 컬러를 사용합니다:

Primary (Pink): #e91e63 - 현재 페이지 강조
Secondary (Blue): #03a9f4 - 링크 호버 상태
Accent (Purple): #9c27b0 - 특별 경로 강조

Cals 특화 사용 가이드

예약 관리 네비게이션:


import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from '@vortex/ui-cals'
import { Home, Calendar, FileText, User } from 'lucide-react'
 
// 예약 목록
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">
        <Home size={16} className="mr-xs" />
        홈
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/reservations">
        <Calendar size={16} className="mr-xs" />
        예약 관리
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <span className="text-primary font-medium">예약 목록</span>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
 
// 예약 상세
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">
        <Home size={16} className="mr-xs" />
        홈
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/reservations">
        <Calendar size={16} className="mr-xs" />
        예약 관리
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/reservations/list">예약 목록</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <FileText size={16} className="mr-xs" />
      <span className="text-primary font-medium">예약 #12345</span>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
 
// 고객 상세에서 예약 상세
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">
        <Home size={16} className="mr-xs" />
        홈
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/customers">
        <User size={16} className="mr-xs" />
        고객 관리
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/customers/12345">홍길동</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/customers/12345/reservations">예약 이력</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <span className="text-primary font-medium">예약 상세</span>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

서비스 관리 네비게이션:


import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
} from "@vortex/ui-cals";
import { Home, Package, Edit } from "lucide-react";
 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">
        <Home size={16} className="mr-xs" />홈
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/services">
        <Package size={16} className="mr-xs" />
        서비스 관리
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/services/premium">프리미엄 패키지</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <Edit size={16} className="mr-xs" />
      <span className="text-primary font-medium">서비스 수정</span>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;

Foundation/iCignal/Cals 비교

속성	Foundation	iCignal	Cals
링크 색상	중립 블루	iCignal Blue (`#2196f3`)	Cals Blue (`#03a9f4`)
현재 페이지 색상	중립 회색	iCignal Blue	Cals Pink (`#e91e63`)
브랜드 적용	없음	iCignal Analytics	Cals 예약 시스템
사용 맥락	범용	데이터 분석	예약 관리
아이콘 통합	✅	✅	✅ 예약/고객 아이콘
테마	중립적 테마	iCignal 테마	Cals 테마 (`@vortex/ui-cals/theme`)

import 경로 차이:


// Foundation
import { Breadcrumb } from "@vortex/ui-foundation";
 
// iCignal
import "@vortex/ui-icignal/theme";
import { Breadcrumb } from "@vortex/ui-icignal";
 
// Cals
import "@vortex/ui-cals/theme"; // 테마 import 필수
import { Breadcrumb } from "@vortex/ui-cals";

Props API

Prop	Type	Default	Description
className	string	-	추가 CSS 클래스
children	ReactNode	-	브레드크럼 내용

접근성

Breadcrumb 컴포넌트는 WCAG 2.1 AA 기준을 준수합니다.

ARIA 속성:

aria-label="breadcrumb" (네비게이션 역할 명시)
aria-current="page" (현재 페이지 표시)

시맨틱 HTML:

<nav> 요소 사용
<ol> 순서 있는 리스트 사용
<a> 링크 요소 사용

키보드 네비게이션:

Tab: 링크 간 이동
Enter: 링크 활성화

스크린 리더 지원:

현재 위치 명확하게 안내
계층 구조 정확하게 전달

예제

예제 1: 예약 관리 브레드크럼 ⭐


import "@vortex/ui-cals/theme";
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
} from "@vortex/ui-cals";
import { Card, CardHeader, CardContent } from "@vortex/ui-cals";
import { Badge, Button } from "@vortex/ui-cals";
import { Home, Calendar, FileText, ArrowLeft, Edit, Trash } from "lucide-react";
 
export default function ReservationDetailBreadcrumb() {
  return (
    <div className="space-y-md">
      {/* Breadcrumb Navigation */}
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="/">
              <Home size={16} className="mr-xs" />홈
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="/reservations">
              <Calendar size={16} className="mr-xs" />
              예약 관리
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="/reservations/list">예약 목록</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <FileText size={16} className="mr-xs" />
            <span className="text-primary font-medium">예약 #12345</span>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
 
      {/* Page Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-md">
          <Button variant="outline" size="sm" href="/reservations/list">
            <ArrowLeft size={16} className="mr-xs" />
            목록으로
          </Button>
          <div>
            <h1 className="text-2xl font-bold">예약 상세 #12345</h1>
            <div className="flex items-center gap-sm mt-xs">
              <Badge variant="confirmed">예약 확정</Badge>
              <span className="text-sm text-muted-foreground">
                2024-01-20 14:00
              </span>
            </div>
          </div>
        </div>
        <div className="flex gap-sm">
          <Button variant="outline">
            <Edit size={16} className="mr-xs" />
            수정
          </Button>
          <Button variant="destructive">
            <Trash size={16} className="mr-xs" />
            삭제
          </Button>
        </div>
      </div>
 
      {/* Reservation Detail Card */}
      <Card>
        <CardContent className="pt-lg">
          <div className="grid grid-cols-2 gap-md">
            <div>
              <h3 className="font-semibold mb-sm">고객 정보</h3>
              <div className="space-y-xs text-sm">
                <p>
                  <strong>이름:</strong> 홍길동
                </p>
                <p>
                  <strong>연락처:</strong> 010-1234-5678
                </p>
                <p>
                  <strong>이메일:</strong> hong@example.com
                </p>
              </div>
            </div>
            <div>
              <h3 className="font-semibold mb-sm">예약 정보</h3>
              <div className="space-y-xs text-sm">
                <p>
                  <strong>서비스:</strong> 프리미엄 패키지
                </p>
                <p>
                  <strong>일시:</strong> 2024-01-20 14:00
                </p>
                <p>
                  <strong>금액:</strong> 150,000원
                </p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

예제 2: 고객 관리 브레드크럼 ⭐


import "@vortex/ui-cals/theme";
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
} from "@vortex/ui-cals";
import { Home, Users, User, Calendar } from "lucide-react";
 
export default function CustomerReservationsBreadcrumb() {
  return (
    <div className="space-y-md">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="/">
              <Home size={16} className="mr-xs" />홈
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="/customers">
              <Users size={16} className="mr-xs" />
              고객 관리
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="/customers/12345">
              <User size={16} className="mr-xs" />
              홍길동
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <Calendar size={16} className="mr-xs" />
            <span className="text-primary font-medium">예약 이력</span>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
 
      <h1 className="text-2xl font-bold">홍길동님의 예약 이력</h1>
    </div>
  );
}