Breadcrumb

현재 위치를 표시하는 브레드크럼 컴포넌트입니다.

개요

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

주요 특징:

계층적 경로 표시
링크 네비게이션
iCignal 브랜드 강조 색상

사용 사례:

iCignal 대시보드 경로
리포트 뷰어 위치
설정 페이지 네비게이션
캠페인 관리 경로

설치


npx @vortex/cli add breadcrumb --package icignal

기본 사용법


import "@vortex/ui-icignal/theme"; // iCignal 테마 적용
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
} from "@vortex/ui-icignal";
 
export default function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/analytics">Analytics</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <span>Dashboard</span>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

iCignal 브랜딩

iCignal 특화 사용 가이드

Analytics 대시보드 경로:


import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
} from "@vortex/ui-icignal";
import { Home, BarChart2 } from "lucide-react";
 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/" className="flex items-center gap-xs">
        <Home size={14} />홈
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/analytics" className="flex items-center gap-xs">
        <BarChart2 size={14} />
        Analytics
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <span className="text-icignal-blue font-medium">트래픽 분석</span>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;

리포트 뷰어 경로:


import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
} from "@vortex/ui-icignal";
import { FileText } from "lucide-react";
 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">홈</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/reports">
        <FileText size={14} className="mr-xs" />
        리포트
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/reports/2024-01">2024년 1월</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <span>월간 분석 리포트</span>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;

Foundation과의 차이점

속성	Foundation	iCignal
활성 색상	중립 회색	iCignal Blue (`#2196f3`)
브랜드 적용	없음	iCignal 아이콘 사용
사용 맥락	범용	Analytics/Reports 경로
테마	중립적 테마	iCignal 테마 (`@vortex/ui-icignal/theme`)

import 경로 차이:


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

예제

예제 1: iCignal 대시보드 네비게이션


import "@vortex/ui-icignal/theme";
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
} from "@vortex/ui-icignal";
import { Home, BarChart2, Users } from "lucide-react";
 
export default function DashboardBreadcrumb() {
  return (
    <div className="p-md bg-white border-b">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="/" className="flex items-center gap-xs">
              <Home size={14} />홈
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink
              href="/analytics"
              className="flex items-center gap-xs"
            >
              <BarChart2 size={14} />
              Analytics
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink
              href="/analytics/audience"
              className="flex items-center gap-xs"
            >
              <Users size={14} />
              사용자 분석
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <span className="text-icignal-blue font-medium">인구통계</span>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  );
}