Side Navigation

KRDS 표준을 따르는 사이드 네비게이션 컴포넌트입니다. 최대 4단계 depth를 지원하며, 토글 기능과 접근성 속성을 자동으로 관리합니다.

개요

설치

사용법

title과 menuItems props를 제공하여 사이드 네비게이션을 생성합니다.

예제

4단계 Depth

3Depth 링크에 children을 추가하여 4Depth 서브메뉴를 만들 수 있습니다.

Active 상태

active: true를 설정하여 현재 페이지를 표시합니다. 부모 섹션도 자동으로 확장됩니다.

커스텀 스타일

className prop으로 추가 스타일을 적용할 수 있습니다.

접근성

WCAG 2.1 / KWCAG 2.2 기준을 준수합니다.

시맨틱 HTML

  • nav, ul, li, button, a 등 시맨틱 요소 사용
  • 네비게이션 제목은 aria-labelledby로 연결

ARIA 속성

  • role="menubar", role="menuitem": 메뉴 역할 명시
  • aria-expanded: 토글 상태 전달
  • aria-controls: 제어 대상 연결
  • aria-current="page": 현재 페이지 표시

키보드 지원

키동작
Tab메뉴 항목 간 포커스 이동
Enter / Space토글 버튼 활성화 또는 링크 이동