Skip to content

내비게이션 컴포넌트

사이트 chrome과 길찾기용 프리미티브.

모든 컴포넌트는 아래 나열된 프롭 외에 공통 프롭(base props)도 받습니다.

프롭 표는 npm run gen:docs로 zod 스키마에서 자동 생성됩니다.

브랜드와 메뉴 항목이 있는 상단 내비게이션 바.

프롭 타입 설명
brand string 브랜드/로고 텍스트 (왼쪽)
items string[] 메뉴 항목 (오른쪽)
navbar:
  brand: "DocHub"
  items: ["Home", "Docs", "Pricing", "Blog"]

세로 내비게이션 목록. 대시보드 레이아웃의 왼쪽 컬럼으로 자주 사용.

프롭 타입 설명
items string[] 메뉴 항목
active string | number 활성 항목 — 라벨 또는 0-based 인덱스
sidebar:
  items: ["Getting Started", "API", "FAQ"]
  active: "API"

tabs

가로 탭 내비게이션.

프롭 타입 설명
items string[] 탭 라벨
active string | number 활성 탭 — 라벨 또는 0-based 인덱스
tabs:
  items: ["Overview", "Billing", "Team"]
  active: 0

사용자 경로를 보여주는 계층적 브레드크럼.

프롭 타입 설명
items string[] 루트에서 현재까지의 세그먼트
breadcrumb:
  items: ["Projects", "Dashboard", "Settings"]

pagination

현재/전체를 보여주는 페이지 내비게이션 컨트롤.

프롭 타입 설명
current number 현재 페이지 (1-based)
total number 전체 페이지 수
pagination:
  current: 3
  total: 12

stepper

여러 단계 진행 표시기. 온보딩이나 결제 플로우에 유용.

프롭 타입 설명
items string[] 단계 라벨
active number 활성 단계의 0-based 인덱스
stepper:
  items: ["Account", "Plan", "Payment", "Confirm"]
  active: 2