KRDS React

콘텐츠 내 탐색 In-page navigation ​

콘텐츠 내 탐색은 사용자가 본문의 구조를 훑어보고 원하는 콘텐츠로 빠르게 이동할 수 있도록 하는 탐색 수단이다. 화면을 스크롤 할 때 특정 위치에 고정되어 콘텐츠의 목차 역할을 하는 동시에 사용자가 페이지 내 탐색에서 특정 항목을 클릭하면 연결된 섹션으로 스크롤 된다.

KRDS 가이드

기본 ​

새 창에서 보기
tsx
import { InPageNavigation } from '@krds.ui/react'

export default function InPageNavigationDemo() {
  return (
    <InPageNavigation
      title="이 페이지의 구성"
      items={[
        { href: '#overview', label: '개요' },
        { href: '#process', label: '처리 절차' }
      ]}
    />
  )
}

InPageNavigation ​

Props

이름타입기본값설명
titlestring-페이지 제목
itemsNavigationItem[][]네비게이션 아이템 목록
captionstring이 페이지의 구성페이지 구성 설명 텍스트
actionTextstring-액션 버튼 텍스트
onActionClick(() => void)-액션 버튼 클릭 핸들러
infoTextReactNode-추가 정보 텍스트 (HTML 태그 지원)
scrollDownbooleanfalse스크롤 시 상단 위치 조정 여부
scrollContainerRefRefObject<HTMLElement | null>-스크롤 컨테이너 참조