KRDS React

건너뛰기 링크 Skip link ​

건너뛰기 링크는 웹사이트에서 웹 페이지의 주요 콘텐츠 섹션의 탐색을 도와주는 페이지 내부 링크이다. 키보드나 가상 초점을 이용하여 콘텐츠를 탐색하는 사용자는 건너뛰기 링크를 이용하여 대부분의 페이지에서 반복되는 콘텐츠 영역을 건너뛰고 주요 콘텐츠로 빠르게 이동할 수 있다.

KRDS 가이드

기본 ​

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

export default function SkipLinkDemo() {
  return (
    <>
      <SkipLink targetId="main">본문 바로가기</SkipLink>
      <main id="main">본문</main>
    </>
  )
}

Props

이름타입기본값설명
targetIdstringbreadcrumb이동할 대상 요소 ID
childrenstring본문 바로가기링크 텍스트 내용
classNamestring-사용자 정의 클래스명