Top navigation
앱과 모바일 웹의 최상단에 위치하는 주요 탐색 요소입니다. 사용자가 서비스의 핵심 섹션과 기능에 빠르게 접근할 수 있도록 돕습니다.
서비스의 최상위 페이지에서 사용자가 위치를 명확하게 인지할 수 있도록 Display 타입을 사용하여 페이지 명을 강조합니다. 페이지 Depth가 발생할 시 Normal을 사용하여 화면의 사용성을 높입니다.
Leading button은 주로 행동을 멈추거나 페이지 맥락에서 벗어날 수 있는 요소들을 위치시킬 수 있습니다. 단, 상황에 따라서 예외적으로 페이지의 행동을 돕는 Icon button이 위치할 수 있습니다.
Tab, Category, Segmented control과 같이 페이지에 내려지는 값의 필터 혹은 화면의 분할 요소들을 배치하여 영역을 더욱 풍부하게 사용할 수 있습니다. Toolbar를 활성화 할 시 Top navigation의 Divider가 Tab의 Divider를 대신합니다.
Web, iOS
- Normal, Display: 스크롤 시 Chrome 효과가 적용되어 배경 색상이 자연스럽게 비칩니다. 배경 색상을 커스터마이징 할 수 있습니다.
- Floating: 스크롤 시 Blur 효과와 그라디언트로 화면과 자연스러운 구분을 만들어냅니다. 그라디언트는 선택 적용할 수 있습니다.
Android
- Normal, Display: 스크롤 시 흰 배경색이 적용되어 뒷 배경이 보이지 않습니다. 배경 색상을 커스터마이징 할 수 있습니다.
- Floating: 스크롤 시 그라디언트로 화면과 자연스러운 구분을 만들어냅니다. 그라디언트는 선택 적용할 수 있습니다.
1depth에서 Top navigation의 Scroll 기본 권장 동작은 아래와 같습니다.
- Normal: Top navigation이 위치합니다.
- Scroll down: Top navigation이 숨김처리 됩니다.
- Floating: 스크롤 시 그라디언트로 화면과 자연스러운 구분을 만들어냅니다. 그라디언트는 선택 적용할 수 있습니다.
