Sidebar Navigation
사이드바 내비게이션
사이드바 내비게이션은 열릴 수도 접힐 수도 있는 명명된 링크가 있는 측면 영역입니다. 일반적으로 제품 내 관련 위치를 그룹화합니다.
실제 예시
작업 공간에는 개요, 보고서 및 관리 하위 그룹으로 분류된 18개의 경로가 있습니다. 사이드바에는 그룹, 현재 페이지 및 레이블을 유지하는 작은 보기가 표시됩니다. 현재 페이지에 대한 동작은 사이트 내비게이션이 아닌 도구 모음에 속합니다.
주요 부분
- 01내비게이션 랜드마크
- 02목적지 그룹
- 03현재 페이지 상태
사용할 때
여러 관련 장소를 가로지르는 눈에 보이는 이름 있는 탐색이 제품에 필요할 때 이 용어를 사용하십시오.
다음 경우에는 사용하지 마세요
몇 개의 주요 링크만 있는 간단한 사이트에 사이드바를 사용하지 마세요. 좁은 화면에서는 서랍이나 다른 작은 레이아웃을 계획하세요.
코드에서 사용된 이름
<nav aria-label=Workspace> grouped links 출시하기 전에
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome：Complete the task with 사이드바 내비게이션 (Sidebar Navigation)。 User context：작업 공간에는 개요, 보고서 및 관리 하위 그룹으로 분류된 18개의 경로가 있습니다. 사이드바에는 그룹, 현재 페이지 및 레이블을 유지하는 작은 보기가 표시됩니다. 현재 페이지에 대한 동작은 사이트 내비게이션이 아닌 도구 모음에 속합니다. Recommended pattern：사이드바 내비게이션 (Sidebar Navigation)。 Why it fits：여러 관련 장소를 가로지르는 눈에 보이는 이름 있는 탐색이 제품에 필요할 때 이 용어를 사용하십시오. Do not use it when：몇 개의 주요 링크만 있는 간단한 사이트에 사이드바를 사용하지 마세요. 좁은 화면에서는 서랍이나 다른 작은 레이아웃을 계획하세요. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：하나의 공식 표준이 전체 용어를 통제하지 않음. 의미는 팀, 플랫폼 또는 프레임워크마다 달라질 수 있음. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 사이드바 내비게이션 (Sidebar Navigation) is used now. Definition: 사이드바 내비게이션은 열릴 수도 접힐 수도 있는 명명된 링크가 있는 측면 영역입니다. 일반적으로 제품 내 관련 위치를 그룹화합니다. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.