03 · Components · 모바일
탭 바Tab Bar
모바일 화면 하단에 고정되어 앱의 최상위 섹션을 전환. 3~5개 항목이 적정. 햄버거 메뉴보다 발견성이 높습니다.
StableWCAG AA
기본
현재 탭: home
사용 가이드
- 최상위 섹션 3~5개만. 설정 같은 부수 항목은 "내 정보" 안에 숨기세요.
- 아이콘과 레이블을 함께 노출하는 것이 가장 안전합니다.
- 현재 탭을 누르면 해당 스택의 루트로 이동하는 관례가 있습니다.
nav[aria-label="하단 내비게이션"]으로 감싸고 선택된 탭에는 aria-current="page"를 부여합니다. 아이콘은aria-hidden, 레이블 텍스트는 스크린리더에 항상 노출됩니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
items | { value, label, icon }[] | 3~5개 최상위 섹션 목록. | |
value / onChange | string / (v: string) => void | 현재 탭과 변경 콜백. |