03 · Components · 탐색
메인 내비게이션Main Navigation
사이트 최상위 이동 경로. 브랜드 + 5~7개 섹션 + 유틸리티로 구성합니다. 헤더 고정을 기본으로 하되 스크롤 다운 시 축소할 수 있습니다.
StableWCAG AA
구성
사용 가이드
- 최상위 항목은 5~7개를 넘기지 마세요. 더 많으면 그룹핑하거나 드롭다운으로.
- 현재 섹션 항목에는 반드시 시각적 강조 +
aria-current="page". - 브랜드 로고는 항상 홈으로 링크되어야 합니다.
- 모바일에서는 햄버거 메뉴로 전환하고 오프캔버스 드로어를 사용합니다.
header 안에 nav[aria-label="주 내비게이션"]을 두어 랜드마크를 부여합니다. 현재 페이지 링크에는 aria-current="page"를 적용하고, 햄버거 메뉴 버튼에는 aria-expanded와 aria-controls를 연결합니다.