Navigation Rail
내비게이션 레일
내비게이션 레일은 화면 가장자리에서 주요 위치의 짧은 수직 목록입니다. 이는 일반적인 디자인 패턴이지, 웹 표준은 아닙니다.
실제 예시
태블릿 앱에는 다섯 개의 안정적인 주요 목적지가 있습니다. 레일은 아이콘, 텍스트 레이블, 현재 위치, 명확한 키보드 순서를 표시합니다. 수십 개의 중첩 목적지는 과부하된 레일 대신 계층 구조가 필요합니다.
주요 부분
- 01목적지 아이콘
- 02텍스트 레이블
- 03현재 표시기
사용할 때
이 용어는 중간 또는 넓은 화면에서 상위 수준의 장소들의 작고 안정적인 집합을 설명할 때 사용합니다.
다음 경우에는 사용하지 마세요
HTML을 긴 레이블이나 깊은 구조에 사용하지 마십시오. 콘텐츠에 필요한 공간을 빼앗아서는 안 됩니다.
코드에서 사용된 이름
edge navigation + current destination 출시하기 전에
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 내비게이션 레일 (Navigation Rail)。 User context：태블릿 앱에는 다섯 개의 안정적인 주요 목적지가 있습니다. 레일은 아이콘, 텍스트 레이블, 현재 위치, 명확한 키보드 순서를 표시합니다. 수십 개의 중첩 목적지는 과부하된 레일 대신 계층 구조가 필요합니다. Recommended pattern：내비게이션 레일 (Navigation Rail)。 Why it fits：이 용어는 중간 또는 넓은 화면에서 상위 수준의 장소들의 작고 안정적인 집합을 설명할 때 사용합니다. Do not use it when：HTML을 긴 레이블이나 깊은 구조에 사용하지 마십시오. 콘텐츠에 필요한 공간을 빼앗아서는 안 됩니다. 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 내비게이션 레일 (Navigation Rail) 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.